在本期中，边肖将为您带来一些关于TypeScript映射类型的信息。文章内容丰富，从专业角度进行分析和描述。希望你看完这篇文章能有所收获。
前言：
TypeScript的官方文档已经更新了很长时间，但我能找到的所有中文文档仍然是旧版本。因此，一些新增加和修订的章节已经被翻译和整理出来。
00-1010有时，一个类型需要基于另一个类型，但您不想复制它，因此此时可以考虑使用映射类型。
映射类型建立在索引签名的语法上，我们先回顾下索引签名：
//需要提前声明属性类型时
typeOnlyBoolsAndHorses={
[key : string]: boolean | Horse；
};
constcomporms : only boolsandhors={ 0
del:true，
rodney:false，
};映射类型是一种泛型类型，它使用PropertyKeys的联合类型，其中PropertyKeys大部分由keyof创建，然后遍历键名来创建一个类型：
typesoptions flagstype={ 0
[propertyinkyoftype]:布尔值；
};在本例中，OptionsFlags将遍历Type的所有属性，然后将其设置为布尔类型。
typeFeatureFlags={ 0
dark mode :()=void；
new user profile :()=void；
};
typeFeatureOptions=options flagsfeatureflags；
//TypeFeatureOptions={ 0
//Darkmode :布尔值；
//NewUserProfile:布尔值；
//}
1.映射类型（Mapped Types）
使用映射类型时，可以使用两个附加修饰符，一个是readonly，用于将属性设置为只读，另一个是？用于设置可选属性。
你可以通过前缀删除或添加这些修饰符——如果你不写前缀，就相当于使用前缀。
//删除属性中的只读属性
typeCreateMutableType={ 0
-readonly[propertyinkyoftype]: type[Property]；
};
typellockedaccount={ 0
readonlyid:string
readonlyname:string
};
typenlockedaccount=createMutablelockedaccount；
//typenlockedaccount={ 0
//id : string；
//name : string；
//}
//删除属性中的可选属性。
type concrete TYPe={ 0 }
[propertyinkyoftype]-？类型[属性]；
};
typeMaybeUser={
id:nbsp
;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;
// }
上述就是小编为大家分享的TypeScript 映射类型是怎样的了，如果刚好有类似的疑惑，不妨参照上述分析进行理解。如果想知道更多相关知识，欢迎关注行业资讯频道。
内容来源网络，如有侵权，联系删除，本文地址：https://www.230890.com/zhan/144818.html