TypeScript|TypeScript 映射类型详情 TypeScript映射类型详情

1.映射类型（Mapped Types）
2.映射修饰符（Mapping Modifiers）
3.通过 as 实现键名重新映射（Key Remapping via as）
4.深入探索（Further Exploration）

前言:
TypeScript 的官方文档早已更新，但我能找到的中文文档都还停留在比较老的版本。所以对其中新增以及修订较多的一些章节进行了翻译整理。
本篇翻译整理自 TypeScript Handbook 中「Mapped Types」章节。
本文并不严格按照原文翻译，对部分内容也做了解释补充。

1.映射类型（Mapped Types）
有的时候，一个类型需要基于另外一个类型，但是你又不想拷贝一份，这个时候可以考虑使用映射类型。
映射类型建立在索引签名的语法上，我们先回顾下索引签名：

// 当你需要提前声明属性的类型时type OnlyBoolsAndHorses = {[key: string]: boolean | Horse; }; const conforms: OnlyBoolsAndHorses = {del: true,rodney: false,};

而映射类型，就是使用了 PropertyKeys 联合类型的泛型，其中 PropertyKeys 多是通过 keyof 创建，然后循环遍历键名创建一个类型：

type OptionsFlags = {[Property in keyof Type]: boolean; };

在这个例子中，OptionsFlags 会遍历 Type 所有的属性，然后设置为布尔类型。

type FeatureFlags = {darkMode: () => void; newUserProfile: () => void; }; type FeatureOptions = OptionsFlags; // type FeatureOptions = {//darkMode: boolean; //newUserProfile: boolean; // }

2.映射修饰符（Mapping Modifiers）
在使用映射类型时，有两个额外的修饰符可能会用到，一个是 readonly，用于设置属性只读，一个是 ? ，用于设置属性可选。
【TypeScript|TypeScript 映射类型详情】你可以通过前缀 - 或者 + 删除或者添加这些修饰符，如果没有写前缀，相当于使用了 + 前缀。

// 删除属性中的只读属性type CreateMutable = {-readonly [Property in keyof Type]: Type[Property]; }; type LockedAccount = {readonly id: string; readonly name: string; }; type UnlockedAccount = CreateMutable; // type UnlockedAccount = {//id: string; //name: string; // }// 删除属性中的可选属性type Concrete = {[Property in keyof Type]-?: Type[Property]; }; type MaybeUser = {id: string; name?: string; age?: number; }; type User = Concrete; // type User = {//id: string; //name: string; //age: number; // }

3.通过 as 实现键名重新映射（Key Remapping via as）
在 TypeScript 4.1 及以后，你可以在映射类型中使用 as 语句实现键名重新映射：

type MappedTypeWithNewProperties = {[Properties in keyof Type as NewKeyType]: Type[Properties]}

举个例子，你可以利用「模板字面量类型」，基于之前的属性名创建一个新属性名：

type Getters = {[Property in keyof Type as `get${Capitalize}`]: () => Type[Property]}; interface Person {name: string; age: number; location: string; } type LazyPerson = Getters; // type LazyPerson = {//getName: () => string; //getAge: () => number; //getLocation: () => string; // }

你也可以利用条件类型返回一个 never 从而过滤掉某些属性:

// Remove the 'kind' propertytype RemoveKindField = {[Property in keyof Type as Exclude]: Type[Property]}; interface Circle {kind: "circle"; radius: number; } type KindlessCircle = RemoveKindField; // type KindlessCircle = {//radius: number; // }

你还可以遍历任何联合类型，不仅仅是 string | number | symbol 这种联合类型，可以是任何类型的联合：

type EventConfig = {[E in Events as E["kind"]]: (event: E) => void; } type SquareEvent = { kind: "square", x: number, y: number }; type CircleEvent = { kind: "circle", radius: number }; type Config = EventConfig// type Config = {//square: (event: SquareEvent) => void; //circle: (event: CircleEvent) => void; // }

4.深入探索（Further Exploration）
映射类型也可以跟其他的功能搭配使用，举个例子，这是一个使用条件类型的映射类型，会根据对象是否有 pii 属性返回 true 或者 false :

type ExtractPII = {[Property in keyof Type]: Type[Property] extends { pii: true } ? true : false; }; type DBFields = {id: { format: "incrementing" }; name: { type: string; pii: true }; }; type ObjectsNeedingGDPRDeletion = ExtractPII; // type ObjectsNeedingGDPRDeletion = {//id: false; //name: true; // }