TypeScript 中的映射类型 (Map Type) 是一种强大的类型工具，它可以从一个类型中映射出另一个类型。本文将详细介绍 TypeScript 的映射类型，包括基础知识、使用方法和实际应用。通过这篇文章的学习，你将对 TypeScript 的映射类型有深入的了解，并能够在实际项目中灵活使用。
基础知识
映射类型是 TypeScript 中的一种高级类型，它可以将一个现有的类型映射为一个新的类型，通常使用 { [K in OldType]: NewType } 的语法来定义。其中，K 是新类型的属性名，OldType 是原始类型，NewType 是目标类型。例如：
-- -------------------- ---- ------- ---- ------ - - ----- ------- ---- ------- -- ---- ------------- - ------- ----- -- - - -- -- --- ----- -- ---- ---------- - ------------------ -------- -- - ----- ------ -
这个例子中我们定义了 PersonPick 类型，它从 Person 类型中挑选了 name 属性，返回了一个包含 name 属性的新类型 PersonName。
使用方法
映射类型的 { [K in OldType]: NewType } 语法非常灵活，除了 in 语法，它还有其他的语法，如 keyof 和 infer。我们来看一些常见的使用方法：
keyof 语法
keyof 语法可以用于获取一个对象的所有属性名的联合类型。例如：
type Person = {
name: string;
age: number;
gender: string;
};
type PersonKeys = keyof Person; // 'name' | 'age' | 'gender'在映射类型中使用 keyof 语法，可以动态地将原来类型中的属性名映射到新类型中。例如：
-- -------------------- ---- ------- ---- ------ - - ----- ------- ---- ------- -- ---- ----------------------- - - -- -- ----- ---- ----- -- ---- -------------- - ----------------------------- -- - ------ ------- ----- ------ -
在这个例子中，我们定义了一个 PersonKeysToOptional 类型，它逐一将 Person 类型中的属性名加上一个 ? 变成可选类型。比如，将 name 转化为 name?。
infer 语法
infer 语法是 TypeScript 中用来推断类型的一个关键字。例如：
type ReturnType<T> = T extends (...args: any[]) => infer R ? R : any;
function sum(a: number, b: number) {
return a + b;
}
type SumReturnType = ReturnType<typeof sum>; // number在上面的例子中，我们定义了一个 ReturnType 类型，它用来获取一个函数的返回类型。在 ReturnType 中，我们使用了 infer 语法来推断 R 的类型，这样就可以正确获取函数的返回类型。
使用映射类型时，我们又可以结合 keyof 和 infer 语法，从而获取对象中属性的类型。例如：
-- -------------------- ---- ------- ---- ------ - - ----- ------- ---- ------- ------- ------- -- ---- ------------------ - - ------- - -- -- ----- --- ----- -- - - - - ------ ---- ------------ - ------------------------ -- ------ - ------ - ------
在这个例子中，我们定义了一个 PersonValueType 类型，它用来获取 Person 对象中每个属性的值的类型。在 PersonValueType 中，我们使用了 keyof 语法获取了 Person 对象中所有的属性名，然后通过 infer 语法推断出每个属性名的值的类型。最终，我们得到了一个包含 Person 属性值类型的联合类型。
实际应用
映射类型在实际应用中非常灵活，下面介绍一些常见的用法：
转化为数组类型
有时候我们需要将一个对象转化为一个数组类型，映射类型可以方便地完成这个任务。例如：
-- -------------------- ---- ------- ---- ------ - - ----- ------- ---- ------- ------- ------- -- ---- -------------- - - -- -- ----- --- ------- -- ---- ----------------- - -------------------- -- ---------- --------- ---------
在这个例子中，我们定义了一个 PersonArray 类型，它将 Person 对象中的所有属性都转化为数组类型。最终我们得到了一个包含 Person 属性值为数组的类型。
转化为元组类型
有时候我们需要将一个对象转化为一个元组类型，映射类型同样可以完成这个任务。例如：
-- -------------------- ---- ------- ---- ------ - - ----- ------- ---- ------- -- ---- --------- ------- ------ - - -- -- ----- --- ------- ---------- ---- ----------- - ---------------- --------- -- -------- -------
在这个例子中，我们定义了一个 ToTuple 类型，它将一个数组类型转化为一个包含元素类型的元组类型。例如，将 [string, number] 转化为 [string, number]。通过映射类型，我们可以逐一将元素包裹在数组中，最终得到一个元组类型。
转化为可选类型
有时候我们需要将一些属性从必填改为可选，映射类型同样可以轻松实现这个任务。例如：
-- -------------------- ---- ------- ---- ------ - - ----- ------- ---- ------- ------- ------- -- ---- ----------- - ------- ----- -- - - -- -- ---- ----- - - - -- -- ------------- -- ---- ----- -- ---- -------------- - ---------------- ------ - ------- -- - ------ ------- ----- ------- ------- ------- -
在这个例子中，我们定义了一个 Optional 类型，它可以将一个对象中的某些属性从必填属性改为可选属性。例如，将 name 和 age 改成可选属性，并返回一个新的 PersonOptional 类型。
总结
本文详细介绍了 TypeScript 中的映射类型 (Map Type)，包括基础知识、使用方法和实际应用。通过学习本文，你现在已经能够灵活使用映射类型，并在开发过程中灵活地应用到需要的场景中。映射类型的功能非常强大，如果你掌握了映射类型，你的 TypeScript 技能将大大提升。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/664b8fead3423812e4a73de9