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

相关推荐
奔跑的web.8 小时前
TypeScript Enum 类型入门:从基础到实战
前端·javascript·typescript
wuhen_n16 小时前
初识TypeScript
javascript·typescript
踢球的打工仔17 小时前
typescript-类
前端·javascript·typescript
奔跑的web.21 小时前
TypeScript 泛型完全指南:写法、四大应用场景与高级用法
前端·javascript·vue.js·typescript
wuhen_n1 天前
TypeScript工作流深度解析:从.ts到.js发生了什么?
前端·javascript·typescript
孟无岐1 天前
【Laya】Scene3D 介绍
typescript·游戏引擎·游戏程序·laya
孟无岐1 天前
【Laya】Sprite3D 介绍
typescript·游戏引擎·游戏程序·laya
Hao_Harrision1 天前
50天50个小项目 (React19 + Tailwindcss V4) ✨ | TodoList(代办事项组件)
前端·typescript·react·tailwindcss·vite7
南村群童欺我老无力.2 天前
Flutter 框架跨平台鸿蒙开发 - 开发双人对战五子棋游戏
flutter·游戏·华为·typescript·harmonyos
xiaoxue..2 天前
Nest.js 框架 企业级开发通关手册
面试·typescript·node.js·开发框架·nest.js