【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 小时前
我把 bug 修得太干净了,测试组以为这个模块本来就没问题
前端·javascript·typescript
退休倒计时5 小时前
【每日一题】LeetCode 39. 组合总和 TypeScript
算法·leetcode·typescript
yyt3630458416 小时前
KlineChartQuant Tooltip 高频交互 200FPS 性能优化完整复盘
前端·经验分享·性能优化·typescript·vue·交互·chrome devtools
用户09340777351410 小时前
HarmonyOS WPS Open SDK 实践:办公审批附件「打开—编辑—回传」代码实现
typescript·harmonyos
Flynt11 小时前
TypeScript 5.8 让我少踩了一个大坑,顺手再聊聊 --erasableSyntaxOnly
前端·javascript·typescript
退休倒计时1 天前
【每日一题】LeetCode 17. 电话号码的字母组合 TypeScript
算法·leetcode·typescript
无情的西瓜皮2 天前
MCP 协议实战:从零搭建一个 MCP 服务器(Node.js 版)
vue.js·人工智能·typescript·node.js
退休倒计时2 天前
【每日一题】LeetCode 78. 子集 TypeScript
算法·leetcode·typescript
学习-学习3 天前
Node.js 现在能直接跑 TypeScript 了?Type Stripping 原理、限制与 tsx / ts-node 取舍
typescript·node.js
yume_sibai3 天前
大屏数据可视化 - 边框红绿呼吸灯实现详解
前端·信息可视化·typescript