在 TypeScript 中，映射类型（Mapped types）是一种将现有类型转换为新类型的方式。它们允许我们根据一个已知的类型来构建一个新类型，同时仍然保留原始类型的某些特征。映射类型可以帮助我们更好地理解和利用 TypeScript 中的类型系统，提高代码的可读性和可维护性。
基本语法
映射类型的基本语法如下所示：
type NewType = { [P in keyof OldType]: NewPropertyType };其中，OldType 表示我们希望转换的旧类型，P 表示旧类型的属性名，keyof 是一个索引类型查询操作符，用于获取旧类型的所有属性名。NewPropertyType 则表示我们希望给属性设置的新类型。
例如，我们可以利用映射类型将一个原本只读的类型转换为可选的类型：
type ReadonlyToOptional<T> = { readonly [P in keyof T]?: T[P] };这里的 ReadonlyToOptional 将一个只读类型转换为可选类型。在转换过程中，[P in keyof T] 表示遍历旧类型 T 的所有属性名，?: T[P] 则表示将原本只读的属性变为可选的属性。
示例代码
下面是一个具体的例子，假设我们需要将下面这个接口中所有的数字属性转换为字符串属性：
interface User {
name: string;
age: number;
phone: number;
}利用映射类型，我们可以很方便地实现这个转换：
type StringifyNumericProps<T> = {
[P in keyof T]: T[P] extends number ? string : T[P]
}
type StringifiedUser = StringifyNumericProps<User>;这里，StringifyNumericProps 是一个类型别名，用于表示数值属性转换为字符串属性的类型。在类型别名中，[P in keyof T] 表示遍历接口 T 的所有属性名，T[P] extends number ? string : T[P] 则表示如果原属性是数值类型，则将其转换为字符串类型。
然后我们使用 StringifiedUser 去定义一个新的类型，它的定义如下：
interface StringifiedUser {
name: string;
age: string;
phone: string;
}这样，我们就成功地将原本的数值属性转换为了字符串属性。
实际应用
映射类型在实际应用中有很多用途。例如，在 Redux 中，我们可以使用映射类型来定义组合多个 reducer 的高阶 reducer：
-- -------------------- ---- ------- ---- ---------- -- - ------- - - ---------- ------- -- -- -- ---- -------------------- - ------- ------- - - -- -- ----- --- ------------- -- - -------- ------------------ - ------- -------- --------- -------------------- -- -- ---------- -- - -- --- -
这里的 ReducersMapObject 表示多个 reducer 对象，我们可以利用映射类型来遍历这个对象，将每个 reducer 函数的输入类型设为对应的状态子树类型，输出类型设为对应的状态子树类型。这样，我们就可以将多个 reducer 组合起来成为一个高阶 reducer，它可以负责整个应用的状态管理。
总结
通过本文的阐述，我们了解了 TypeScript 中的映射类型及其基本语法和应用。映射类型可以帮助我们更好地理解和利用 TypeScript 中的类型系统，提高代码的可读性和可维护性。在实际开发中，我们可以根据具体的场景合理地应用映射类型，并从中获得更好的开发体验和代码质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64692a90968c7c53b0931dab