TypeScript 交叉类型进阶教程

在本教程中,你将学习 TypeScript 中的交叉类型。

TypeScript 中的交叉类型介绍

交叉类型指的是通过组合多个现有类型创建而来的新的类型,新的类型具有现有类型的所有属性。

使用 & 操作符来表示组合类型,如下所示:

type typeAB = typeA & typeB;

typeAB 会有 typeAtypeB 的所有属性。

注意,联合类型使用 | 操作符,定义一个可以保存 typeA 或者 typeB 类型的值。

let varName = typeA | typeB; // union type

假设你有三个接口:BusinessPartner, IdentityContact

interface BusinessPartner {
  name: string;
  credit: number;
}

interface Identity {
  id: number;
  name: string;
}

interface Contact {
  email: string;
  phone: string;
}

下面定义了两个交叉类型:

type Employee = Identity & Contact;
type Customer = BusinessPartner & Contact;

Employee 类包含 IdentityContact 类型中的所有属性:

type Employee = Identity & Contact;

let e: Employee = {
  id: 100,
  name: 'John Doe',
  email: 'john.doe@example.com',
  phone: '(408)-897-5684',
};

Customer 类型包含 BusinessPartnerContact 类型中的所有属性:

type Customer = BusinessPartner & Contact;

let c: Customer = {
  name: 'ABC Inc.',
  credit: 1000000,
  email: 'sales@abcinc.com',
  phone: '(408)-897-5735',
};

之后,如果你想实现销售员工,你可以创建一个新的交叉类型,它包含 Identity, ContactBusinessPartner 三个接口中的所有属性:

type Employee = Identity & BusinessPartner & Contact;

let e: Employee = {
  id: 100,
  name: 'John Doe',
  email: 'john.doe@example.com',
  phone: '(408)-897-5684',
  credit: 1000,
};

注意 BusinessPartnerIdentity 有相同类型的 name 属性,如果它们类型不同,编译器会抛出一个错误提示。

类型顺序

类型交叉中的类型的顺序并不重要,如下所示:

type typeAB = typeA & typeB;
type typeBA = typeB & typeA;

在这个例子中,typeABtypeBA 有着相同的属性,它们是等价的。

小结

教程来源于Github,感谢cody1991大佬的无私奉献,致敬!

技术教程推荐

技术领导力实战笔记 -〔TGO鲲鹏会〕

透视HTTP协议 -〔罗剑锋(Chrono)〕

Flutter核心技术与实战 -〔陈航〕

编辑训练营 -〔总编室〕

分布式技术原理与算法解析 -〔聂鹏程〕

职场求生攻略 -〔臧萌〕

爱上跑步 -〔钱亮〕

郭东白的架构课 -〔郭东白〕

中间件核心技术与实战 -〔丁威〕