【TypeScript】TS交叉类型

TypeScript 中的交叉类型(Intersection Types)是一种强大的类型构造,允许多个类型组合成一个新类型,新类型将具有所有原类型的特性。交叉类型使用 & 运算符来定义,以下是详细介绍和几个示例:

定义

交叉类型使用 & 运算符将多个类型合并在一起,如下所示:

typescript 复制代码
type Type1 = { property1: number };
type Type2 = { property2: string };

type CombinedType = Type1 & Type2;

在上面的示例中,CombinedTypeType1Type2 的交叉类型,它具有 property1property2 两个属性。

合并对象类型

typescript 复制代码
type Person = { name: string; age: number };
type Address = { street: string; city: string };

type PersonWithAddress = Person & Address;

const personWithAddress: PersonWithAddress = {
  name: 'John',
  age: 30,
  street: '123 Main St',
  city: 'Example City'
};

上述示例中,PersonWithAddress 类型合并了 PersonAddress 类型,生成了一个包含姓名、年龄、街道和城市属性的新类型。

组合函数类型

typescript 复制代码
type MathFunction = (x: number) => number;
type StringFunction = (s: string) => string;

type CombinedFunction = MathFunction & StringFunction;

const combinedFunc: CombinedFunction = (arg) => arg.toString();

const result = combinedFunc(42); // 返回字符串 "42"

在这个示例中,CombinedFunctionMathFunctionStringFunction 的交叉类型,这允许 combinedFunc 接受一个数字并返回它的字符串表示。

合并类类型

typescript 复制代码
class Dog {
  bark() {
    console.log('Woof! Woof!');
  }
}

class Robot {
  move() {
    console.log('Walking...');
  }
}

type PetRobot = Dog & Robot;

const petRobot = new PetRobot();
petRobot.bark();  // 输出 "Woof! Woof!"
petRobot.move();  // 输出 "Walking..."

在这个示例中,PetRobot 类型是 DogRobot 类型的交叉类型,所以 petRobot 实例既能够叫也能够行走。

合并接口类型

typescript 复制代码
interface Employee {
  name: string;
  jobTitle: string;
}

interface Manager {
  department: string;
}

type ManagerEmployee = Employee & Manager;

const managerEmployee: ManagerEmployee = {
  name: 'Alice',
  jobTitle: 'Manager',
  department: 'HR'
};

在这个示例中,ManagerEmployee 类型是 EmployeeManager 接口的交叉类型,它包含了员工的名称、工作标题和经理的部门。

合并枚举类型

typescript 复制代码
enum Color {
  Red = 'RED',
  Green = 'GREEN',
  Blue = 'BLUE'
}

enum Size {
  Small = 'SMALL',
  Medium = 'MEDIUM',
  Large = 'LARGE'
}

type ColorSize = Color & Size;

const myChoice: ColorSize = 'REDMEDIUM';

在这个示例中,ColorSize 类型是 ColorSize 枚举的交叉类型。您可以将颜色和尺寸组合在一起,例如 'REDMEDIUM'

合并混合类型

typescript 复制代码
type Printable = {
  print: () => void;
};

type Serializable = {
  serialize: () => string;
};

type Document = Printable & Serializable;

const document: Document = {
  print: () => console.log('Printing...'),
  serialize: () => 'Serialized data'
};

document.print();        // 输出 "Printing..."
const serialized = document.serialize();
console.log(serialized); // 输出 "Serialized data"

在这个示例中,Document 类型是 PrintableSerializable 类型的交叉类型,它可以打印和序列化文档对象。

这些示例展示了如何使用交叉类型将不同类型的特性合并到一个新的类型中,以满足特定需求。交叉类型是 TypeScript 中强大的类型工具,用于创建复杂、多功能的类型定义。

相关推荐
天涯学馆4 小时前
Deno与Secure TypeScript:安全的后端开发
前端·typescript·deno
applebomb7 小时前
【2024】uniapp 接入声网音频RTC【H5+Android】Unibest模板下Vue3+Typescript
typescript·uniapp·rtc·声网·unibest·agora
读心悦18 小时前
TS 中类型的继承
typescript
读心悦19 小时前
在 TS 的 class 中,如何防止外部实例化
typescript
Small-K1 天前
前端框架中@路径别名原理和配置
前端·webpack·typescript·前端框架·vite
宏辉1 天前
【TypeScript】异步编程
前端·javascript·typescript
LJ小番茄2 天前
TS(type,属性修饰符,抽象类,interface)一次性全部总结
前端·javascript·vue.js·typescript
It'sMyGo3 天前
Javascript数组研究03_手写实现_fill_filter_find_findIndex_findLast_findLastIndex
前端·javascript·typescript
bobostudio19953 天前
TypeScript 算法手册【快速排序】
前端·javascript·算法·typescript
垂钓的小鱼13 天前
尚硅谷vue3+TypeScript笔记大全
javascript·typescript·vue