写点什么

TypeScript 之映射类型

作者:冴羽
  • 2021 年 12 月 06 日
  • 本文字数:2157 字

    阅读完需:约 7 分钟

TypeScript 之映射类型

TypeScript 的官方文档早已更新,但我能找到的中文文档都还停留在比较老的版本。所以对其中新增以及修订较多的一些章节进行了翻译整理。


本篇翻译整理自 TypeScript Handbook 中 「Mapped Types」 章节。


本文并不严格按照原文翻译,对部分内容也做了解释补充。

映射类型(Mapped Types)

有的时候,一个类型需要基于另外一个类型,但是你又不想拷贝一份,这个时候可以考虑使用映射类型。


映射类型建立在索引签名的语法上,我们先回顾下索引签名:


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


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


type OptionsFlags<Type> = {  [Property in keyof Type]: boolean;};
复制代码


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


type FeatureFlags = {  darkMode: () => void;  newUserProfile: () => void;}; type FeatureOptions = OptionsFlags<FeatureFlags>;// type FeatureOptions = {//    darkMode: boolean;//    newUserProfile: boolean;// }
复制代码

映射修饰符(Mapping Modifiers)

在使用映射类型时,有两个额外的修饰符可能会用到,一个是 readonly,用于设置属性只读,一个是 ? ,用于设置属性可选。


你可以通过前缀 - 或者 + 删除或者添加这些修饰符,如果没有写前缀,相当于使用了 + 前缀。


// 删除属性中的只读属性type CreateMutable<Type> = {  -readonly [Property in keyof Type]: Type[Property];}; type LockedAccount = {  readonly id: string;  readonly name: string;}; type UnlockedAccount = CreateMutable<LockedAccount>;
// type UnlockedAccount = {// id: string;// name: string;// }
复制代码


// 删除属性中的可选属性type Concrete<Type> = {  [Property in keyof Type]-?: Type[Property];}; type MaybeUser = {  id: string;  name?: string;  age?: number;}; type User = Concrete<MaybeUser>;// type User = {//    id: string;//    name: string;//    age: number;// }
复制代码

通过 as 实现键名重新映射(Key Remapping via as

在 TypeScript 4.1 及以后,你可以在映射类型中使用 as 语句实现键名重新映射:


type MappedTypeWithNewProperties<Type> = {    [Properties in keyof Type as NewKeyType]: Type[Properties]}
复制代码


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


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


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


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


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


type EventConfig<Events extends { kind: string }> = {    [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<SquareEvent | CircleEvent>// type Config = {//    square: (event: SquareEvent) => void;//    circle: (event: CircleEvent) => void;// }
复制代码

深入探索(Further Exploration)

映射类型也可以跟其他的功能搭配使用,举个例子,这是一个使用条件类型的映射类型,会根据对象是否有 pii 属性返回 true 或者 false :


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

TypeScript 系列

  1. TypeScript 之 基础入门

  2. TypeScript 之 常见类型(上)

  3. TypeScript 之 常见类型(下)

  4. TypeScript 之 类型收窄

  5. TypeScript 之 函数

  6. TypeScript 之 对象类型

  7. TypeScript 之 泛型

  8. TypeScript 之 Keyof 操作符

  9. TypeScript 之 Typeof 操作符

  10. TypeScript 之 索引访问类型

  11. TypeScript 之 条件类型


微信:「mqyqingfeng」,加我进冴羽唯一的读者群。


如果有错误或者不严谨的地方,请务必给予指正,十分感谢。如果喜欢或者有所启发,欢迎 star,对作者也是一种鼓励。

发布于: 3 小时前阅读数: 5
用户头像

冴羽

关注

还未添加个人签名 2019.01.25 加入

还未添加个人简介

评论

发布
暂无评论
TypeScript 之映射类型