前言:
typescript
的官方文档早已更新,但我能找到的中文文档都还停留在比较老的版本。所以对其中新增以及修订较多的一些章节进行了翻译整理。
本篇翻译整理自 typescript handbook 中 「mapped types」 章节。
劳动法和社会保障法本文并不严格按照原文翻译,对部分内容也做了解释补充。
有的时候,一个类型需要基于另外一个类型,但是你又不想拷贝一份,这个时候可以考虑使用映射类型。
映射类型建立在索引签名的语法上,我们先回顾下索引签名:
// 当你需要提前声明属性的类型时type onlyboolsandhors = { [key: string]: boolean | hor;}; const conforms: onlyboolsandhors = { del: true, rodney: fal,};
而映射类型,就是使用了 propertykeys
联合类型的泛型,其中 propertykeys
多是通过 keyof
创建,然后循环遍历键名创建一个类型:
type optionsflags<type> = { [property in keyof type]: boolean;};
在这个例子中,optionsflags
会遍历 type 所有的属性,然后设置为布尔类型。
type featureflags = { darkmode: () => void; newurprofile: () => void;}; type featureoptions = optionsflags<featureflags>;// type featureoptions = {// darkmode: boolean;// newurprofile: boolean;// }qq登录记录怎么查询
在使用映射类型时,有两个额外的修饰符可能会用到,一个是 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 maybeur = { id: string; name?: string; age?: number;}; type ur = concrete<maybeur>;// type ur = {// id: string;// name: string;// age: number;// }
在 typescript 4.1
及以后,你可以在映射类型中使用 as 语句实现键名重新映射:
type mappedtypewithnewproperties<type> = { [properties in keyof type as newkeytype]: type[properties]}
举个例子,你可以利用「模板字面量类型」,基于之前的属性名创建一个新属性名:
type getters<type关于保护环境的建议书> = { 姐妹qq网名 [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;// }
映射类型也可以跟其他的功能搭配使用,举个例子,这是一个使用条件类型的映射类型,会根据对象是否有 pii 属性返回 true 或者 fal :
type extractpii<type> = { [property in keyof type]: type[property] extends { pii: true } ? true : fal;}; type dbfields = { id: { format: "incrementing" }; name: { type: string; pii: true };}; type objectsneedinggdprdeletion = extractpii<dbfields>;// type objectsneedinggdprdeletion = {// id: fal;// name: true;// }
本文发布于:2023-04-04 02:42:42,感谢您对本站的认可!
本文链接:https://www.wtabcd.cn/fanwen/zuowen/b83ac1b18d26de6cd1b00164880f0d09.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文word下载地址:TypeScript 映射类型详情.doc
本文 PDF 下载地址:TypeScript 映射类型详情.pdf
留言与评论(共有 0 条评论) |