返回

揭秘 TypeScript 映射类型：让同事直呼内行的秘诀

前端

SEO 关键词：

TypeScript 中的映射类型就像一扇通往编程世界新可能性的大门。通过将现有类型的键与新类型的值配对，映射类型可以灵活地创建新的类型，并提供强大的类型检查和重构功能。

基础入门

让我们从映射类型的基础开始。它采用以下语法：

{ [key: Type1]: Type2 }

在这里，Type1 指定键的类型，而 Type2 指定值类型。例如，我们可以创建一个将数字键映射到字符串值的映射类型：

type StringMap = { [key: number]: string };

高级用法

映射类型不仅限于简单的键值对。它们还可以利用 TypeScript 的其他类型特性，例如：

  • 联合类型： 使用管道 (|) 将多个类型组合成一个联合类型，例如：
type UnionMap = { [key: string | number]: boolean };
  • 条件类型： 使用条件运算符 (?) 根据键值动态创建类型，例如：
type ConditionalMap = {
  [key: string]: key extends "foo" ? number : boolean;
};
  • 映射类型运算符（in）： 检查类型中是否存在给定的键，例如：
type HasKey<T, K> = K extends keyof T ? true : false;

TypeScript 4.1 新语法

TypeScript 4.1 引入了新的 keyof 和 infer 类型运算符，进一步增强了映射类型的能力：

  • keyof： 返回类型的键的联合类型，例如：
type KeyofMap = keyof { [key: string]: number }; // "string"
  • infer： 在条件类型中推断类型变量，例如：
type InferredMap = {
  [key: string]: infer ValueType;
};

应用场景

映射类型在各种场景中都非常有用，例如：

  • 创建灵活的配置对象
  • 规范化来自不同来源的数据
  • 构建通用的函数或类
  • 提高代码重用性

结论

TypeScript 映射类型是 TypeScript 中一个功能强大的工具，可以让你的代码更加灵活、健壮和易于维护。通过掌握其基本概念和高级用法，你可以显著提升你的 TypeScript 编程技能。无论你是初学者还是经验丰富的开发者，探索映射类型的世界都能为你的开发之旅带来新的可能。