TypeScript 映射类型详情
前言:
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<type> = { [property in keyof type]: boolean; };
在这个例子中,optionsflags
会遍历 type 所有的属性,然后设置为布尔类型。
type featureflags = { darkmode: () => void; newuserprofile: () => void; }; type featureoptions = optionsflags<featureflags>; // type featureoptions = { // darkmode: boolean; // newuserprofile: boolean; // }
2.映射修饰符(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; // }
3.通过 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' property type 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; // }
4.深入探索(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; // }
上一篇: 深入了解Python的继承
下一篇: 年后的笑段还是这么春节