掌握 TypeScript 中的映射类型

,DRY 原则（Don't repeat yourself）是软件开发中最重要的原则之一，即不要重复自己。应该避免在代码中的两个或多个地方存在重复的业务逻辑。,在 TypeScript 中，映射类型可以帮助我们避免编写重复的代码，它可以根据现有类型和定义的一些规则来创建新类型。下面就来看一下什么是映射类型以及如何构建自己的映射类型。,在介绍映射类型之前，先来看一些前置知识。,在 TypeScript 中，我们可以通过按名称查找属性来访问它的类型：,在这个例子中，通过 AppConfig​ 类型的索引 username​ 获取到其类型 string，类似于在 JavaScript 中通过索引来获取对象的属性值。,当类型属性的实际名称是未知的，但它们将引用的数据类型已知时，索引签名就很方便。,在上面的例子中，currentLang 的类型是 string 而不是 any。此功能与 keyof 运算符一起搭配使用是使映射类型成为可能的核心之一。,联合类型是两种或多种类型的组合。它表明值的类型可以是联合中包含的任何一种类型。,下面是一个更复杂的例子，编译器可以为联合类型提供一些高级保护：,在这个例子中，因为 Animal 和 Person 都有 name 属性，所以第 15 行的 value.name​ 可以正常输出，没有错误。而第 16 行的 value.age 会编译错误，因为如果 value 是 Animal 类型，则 value 是没有 age 属性的。在第 19 行的 if 块中，因为只有 value 存在 age 属性才能进入这个代码块。所以，在这个 if 块中，value 一定是 Person，TS 可以知道 value 一定是具有 age 属性的，所以编译正确。,keyof 类型运算符返回传递给它的类型的 key 的联合。,在这个例子中，AppConfigKey​ 类型会被解析为"username" | "layout"。它可以与索引签名一起使用：,这里，UserPreferenceKey​ 类型被解析为 string | number。,元组是一种特殊的数组类型，其中数组的元素可能是特定索引处的特定类型。它们允许 TypeScript 编译器围绕值数组提供更高的安全性，尤其是当这些值属于不同类型时。,例如，TypeScript 编译器能够为元组的各种元素提供类型安全：,上面的代码中会报错，Currency​ 类型的参数不能分配给“number[]​”类型的参数，string​ 类型不能分配给 number 类型。,当访问超出元组定义类型的索引处的元素时，TypeScript 能够进行提示：,这里，元组类型 LatLong 只有两个元素，当试图访问第三个元素时，就会报错。,条件类型是一个表达式，类似于 JavaScript 中的三元表达式，其语法如下：,来看一个实际的例子：,在上面的示例中，ConditionalType 的类型将是 boolean，因为条件string extends boolean 是始终为 false。,在 TypeScript 中，当需要从另一种类型派生（并保持同步）另一种类型时，使用映射类型会特别有用。,在上面的代码中，AppConfig 和 AppPermissions 之间是存在隐式关系的，每当向 AppConfig 添加新的配置值时，AppPermissions 中也必须有相应的布尔值。,这里可以使用映射类型来管理两者之间的关系：,在上面的代码中，只要 AppConfig 中的类型发生变化，AppPermissions 就会随之变化。实现了两者之间的映射关系。,在 TypeScript 和 JavaScript 中，最常见的映射就是 Array.prototype.map()：,这里，我们将数组中的数字映射到其字符串的表示形式。因此，TypeScript 中的映射类型意味着将一种类型转换为另一种类型，方法就是对其每个属性进行转换。,下面来通过一个例子来深入理解一下映射类型。对设备定义以下类型，其包含制造商和价格属性：,为了让用户更容易理解设备信息，因此为对象添加一个新类型，该对象可以使用适当的格式来格式化设备的每个属性：,我们来拆解一下上面的代码。Key in keyof Device 使用 keyof 类型运算符生成 Device 中所有键的并集。将它放在索引签名中实际上是遍历 Device 的所有属性并将它们映射到 DeviceFormatter 的属性。,format${Capitalize<Key>} 是映射的转换部分，它使用 key 重映射和模板文字类型将属性名称从 x 更改为 formatX。,(value: Device[Key]) => string;​ 利用索引访问类型 Device[Key] 来指示格式化函数的 value 参数是格式化的属性的类型。因此，formatManufacturer 接受一个 string（制造商），而 formatPrice 接受一个number（价格）。,下面是 DeviceFormatter 类型的样子：,现在，假设将第三个属性 releaseYear 添加到 Device 类型中：,由于映射类型的强大功能，DeviceFormatter 类型会自动扩展为如下类型，无需进行任何额外的工作：,TypeScript 附带了许多用作实用程序的映射类型，最常见的包括 Omit、Partial、Readonly、Readonly、Exclude、Extract、NonNullable、ReturnType 等。下面来看看其中的两个是如何构建的。,Partial 是一种映射类型，可以将已有的类型属性转换为可选类型，并通过使用与 undefined 的联合使类型可以为空。,这里的 PartialPoint3D 类型实际是这样的：,当我们鼠标悬浮在 Partial 上时，就会看到它的定义：把它拿出来：,下面来拆解一下这行代码：,Exclude 是一种映射类型，可让有选择地从类型中删除属性。其定义如下：,它通过使用条件类型从 T 中排除那些可分配给 U 的类型，并且在排除的属性上返回 nerver。,通过上面的对 TypeScript 内置实用程序类型的原理解释，对映射类型有了更深的理解。最后，我们来构建一个自己的映射类型：Optional，它可以将原类型中指定 key 的类型置为可选的并且可以为空。,我们可以这样做：,实现代码及测试用例如下：,注意，这里使用 K extends keyof T 来确保只能传递属于类型/接口的属性。否则，TypeScript 将在编译时抛出错误。,映射类型的一大优点就是它们的可组合性：可以组合它们来创建新的映射类型。,上面使用了已有的实用程序类型实现了我们想要的 Optional。当然，我们也可以在不使用任何其他映射类型的情况下重新创建 Optional 映射类型实用程序：,上面的代码结合了两种类型：