【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 中强大的类型工具,用于创建复杂、多功能的类型定义。

相关推荐
烛阴16 小时前
【TS 设计模式完全指南】懒加载、缓存与权限控制:代理模式在 TypeScript 中的三大妙用
javascript·设计模式·typescript
奔跑的蜗牛ing1 天前
Vue3 + Element Plus 输入框省略号插件:零侵入式全局解决方案
vue.js·typescript·前端工程化
光影少年2 天前
Typescript工具类型
前端·typescript·掘金·金石计划
开心不就得了2 天前
React 状态管理
react.js·typescript
冷冷的菜哥2 天前
react实现无缝轮播组件
前端·react.js·typescript·前端框架·无缝轮播
lypzcgf3 天前
Coze源码分析-资源库-创建知识库-前端源码-核心组件
前端·typescript·react·coze·coze源码分析·ai应用平台·agent开发平台
患得患失9493 天前
【个人项目】【前端实用工具】OpenAPI to TypeScript 转换器
前端·javascript·typescript
万添裁4 天前
ArkAnalyzer源码初步分析I——分析ts项目流程
typescript·arkanalyzer
凡二人5 天前
Flip-js 优雅的处理元素结构变化的动画(解读)
前端·typescript
烛阴5 天前
【TS 设计模式完全指南】TypeScript 装饰器模式的优雅之道
javascript·设计模式·typescript