这期内容当中小编将会给大家带来有关typescript 映射类型是怎样的,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。前言:TypeScript 的官方文档早已更新,但我能找到的中文文档都还停留
这期内容当中小编将会给大家带来有关typescript 映射类型是怎样的,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。
前言:
TypeScript
的官方文档早已更新,但我能找到的中文文档都还停留在比较老的版本。所以对其中新增以及修订较多的一些章节进行了翻译整理。
有的时候,一个类型需要基于另外一个类型,但是你又不想拷贝一份,这个时候可以考虑使用映射类型。
映射类型建立在索引签名的语法上,我们先回顾下索引签名:
// 当你需要提前声明属性的类型时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;// }
在使用映射类型时,有两个额外的修饰符可能会用到,一个是 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;// }
在 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;// }
映射类型也可以跟其他的功能搭配使用,举个例子,这是一个使用条件类型的映射类型,会根据对象是否有 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 映射类型是怎样的了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注编程网精选频道。
--结束END--
本文标题: TypeScript 映射类型是怎样的
本文链接: https://www.lsjlt.com/news/301800.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-05-15
2024-05-15
2024-05-15
2024-05-15
2024-05-15
2024-05-15
2024-05-15
2024-05-15
2024-05-15
2024-05-15
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0