探索 TypeScript 索引映射类型：释放联合类型遍历的强大功能

2023-11-12 02:43:05

今天，让我们深入探讨 TypeScript 中一种新的转换类型操作：索引映射类型（IIMT，Immediately Indexed Mapped Type）。IIMT 是一种令人着迷的类型，它赋予了我们遍历联合类型的强大功能，解锁了 JavaScript 类型系统的新领域。

IIMT 本质上是一种语法糖，允许我们使用联合类型的每个成员定义一个新类型。这可以通过使用索引签名语法 <[K in U]> 来实现，其中 K 是索引变量，U 是联合类型。

让我们通过一个示例来理解 IIMT 的工作原理：

type Colors = "red" | "green" | "blue";

type ColorMap = {
  [K in Colors]: `The color is ${K}`;
};

// 输出：
// {
//   red: "The color is red",
//   green: "The color is green",
//   blue: "The color is blue"
// }

在这个示例中，我们首先定义了一个 Colors 联合类型，其中包含 "red"、"green" 和 "blue"。然后，我们使用 IIMT 创建了一个 ColorMap 类型，该类型将 Colors 联合类型的每个成员映射到一个字符串文字，指示该成员的颜色。

IIMT 不仅限于字符串文字。我们还可以使用 IIMT 创建更复杂的类型，例如：

type User = {
  name: string;
  age: number;
};

type UserMap = {
  [K in keyof User]: User[K];
};

// 输出：
// {
//   name: string,
//   age: number
// }

在这个示例中，我们使用 IIMT 创建了一个 UserMap 类型，该类型将 User 接口的每个属性（name 和 age）映射到其各自的类型（string 和 number）。

IIMT 是一种功能强大的工具，可以极大地简化联合类型的处理。它使我们能够遍历联合类型，并为每个成员创建自定义类型。这在各种场景中都非常有用，例如：