探寻 TypeScript 的高级类型：交织、联合、索引、映射与条件类型

2023-12-26 22:10:53

## TypeScript 高级类型：解锁代码的灵活性

TypeScript 不仅是一门强有力的编程语言，提供基础类型和语法，还引入了高级类型，这些类型增强了语言的灵活性，帮助开发人员应对日益复杂多变的开发场景。在本文中，我们将深入探讨五种高级类型：交叉类型、联合类型、索引类型、映射类型和条件类型，并通过示例逐一揭示它们的奥秘。

一、交叉类型：融合特质，打造新类型

交叉类型允许我们将多个类型的属性和方法合并，创建出一个新的类型。我们使用 & 符号来定义交叉类型。这就像将多个乐高积木拼接在一起，创造一个全新的玩具。

interface Person {
  name: string;
}

interface Employee {
  employeeId: number;
  salary: number;
}

// 交叉类型: Person & Employee
type PersonEmployee = Person & Employee;

// 实例化 PersonEmployee 类型
let John: PersonEmployee = {
  name: "John Doe",
  employeeId: 12345,
  salary: 100000
};

在此例中，PersonEmployee 类型融合了 Person 和 Employee 类型的属性和方法。我们可以使用 John 变量同时访问 name、employeeId 和 salary 属性，就像一个拥有多重身份的超级英雄。

二、联合类型：包罗万象，兼容多态

联合类型允许我们定义一组可能的值，这些值可以是不同类型的数据。我们使用 | 符号来定义联合类型。想象一下一个神奇的盒子，它可以容纳各种各样的物品，例如玩具、书籍或电子产品。

type EmployeeID = number | string;

// 定义一个函数, 接受 EmployeeID 类型的参数
function getEmployeeInfo(id: EmployeeID): void {
  // ...
}

// 调用函数, 传入数字或字符串类型的参数
getEmployeeInfo(12345);
getEmployeeInfo("ABC123");

在此例中，EmployeeID 联合类型允许我们接受数字或字符串类型的参数，就像一个兼容各种身份的万能钥匙，从而增强了函数的灵活性。

三、索引类型：灵动访问，弹性数据

索引类型允许我们使用属性名作为索引来访问对象或数组中的元素。这就好比一个图书馆，我们可以通过书名或作者名快速找到我们想要的信息。

type Person = {
  [key: string]: any;
};

// 实例化 Person 类型
let John: Person = {
  name: "John Doe",
  age: 30,
  city: "New York"
};

// 使用索引类型访问属性
console.log(John["name"]); // "John Doe"
console.log(John["age"]); // 30
console.log(John["city"]); // "New York"

在此例中，Person 类型使用索引类型 [key: string]: any，允许我们使用字符串作为索引来访问对象的属性，就像用密钥解锁宝箱一样。

四、映射类型：键值对舞，重塑结构

映射类型允许我们创建一个新的类型，其键名和值类型分别由原类型的键名和值类型转换而来。这就像一个变形金刚，可以根据我们的需要改变形状和属性。

type Person = {
  name: string;
  age: number;
  city: string;
};

// 定义映射类型, 将 Person 类型映射为一个字符串类型的对象
type PersonStringMap = {
  [key in keyof Person]: string;
};

// 实例化 PersonStringMap 类型
let John: PersonStringMap = {
  name: "John Doe",
  age: "30",
  city: "New York"
};

// 访问映射类型中的键值对
console.log(John["name"]); // "John Doe"
console.log(John["age"]); // "30"
console.log(John["city"]); // "New York"

在此例中，PersonStringMap 映射类型将 Person 类型的键名和值类型分别转换为字符串类型，就像将一幅画转换成一幅素描。

五、条件类型：智者抉择，编译时判断

条件类型允许我们在编译时根据条件来决定类型。这就像一个明智的顾问，可以根据情况提出最佳建议。

type IsString<T> = T extends string ? true : false;

// 使用条件类型判断变量的类型
let name: string = "John Doe";
let isString: IsString<typeof name>; // true

let age: number = 30;
let isString2: IsString<typeof age>; // false