Tip: After the article is written, the table of contents can be automatically generated. How to generate it can refer to the help document on the right
Typescript high-level mapping types and keyof
Recommended website for essential front-end tools (free picture bed, API, ChatAI and other practical tools):
http://luckycola.com.cn/
Preface
Learning objectives
1. Mapping type syntax and examples
2. Implement MyPartial tool type
3. Key mapping syntax and examples
4. keyof usage
1. Mapping type syntax and examples
1. Mapping type syntax
The code is as follows (example):
// 映射类型语法
// { readonly [P in K]?: T}
// { [P in K]: T}
// { [P in K]?: T}
// { [P in K]-?: T}
// { readonly [P in K]: T}
// { readonly [P in K] ?: T}
// { -readonly [P in K] ?: T}
2. Example of mapping type
The code is as follows (example):
// 映射类型示例
type Item = {
a: string; b: number; c: boolean; };
type T1 = {
[P in 'x' | 'y']: number }; // {x: number; y: number}
type T2 = {
[P in 'x' | 'y']: P }; // {x: ‘x' ; y: 'y'}
type T3 = {
[P in 'a' | 'b']: Item[P] }; // {a: string ; b: number}
type T4 = {
[P in keyof Item]: Item[P] }; // {a: string ; b: number, c: boolean}
2. Implementation tool types
MyPartial
The code is as follows (example):
// 工具类型
type MyParital<T> = {
[P in keyof T]?: T[P]
};
type U1 = MyParital<{
name: string; age: number }>;// { name?: string; age?: number }
3. Key mapping syntax and examples
1. Key mapping syntax
The code is as follows (example):
// key Mapping语法 其中的NewKeysType表示映射成的新key
type MappedTypeWidthNewKeys<T> = {
[P in keyof T as NewKeysType]: T[P];
};
2. Key mapping example
Getter
Function: Generate getter function type of object KV type
// 例子 -- Getter工具类型
// 功能：生成对象KV类型的getter函数类型
type Getter<T> = {
[K in keyof T as `get${
Capitalize<K & string>}`]: () => T[K];
};
interface User {
name: string;
age: number;
choose: boolean;
};
type Getter1 = Getter<User>;
// {
// getName: () => string;
// getAge: () => number;
// getChoose: () => boolean;
// }
RemoveKindField
Function: Remove a certain key type
// 例子 -- RemoveKindField工具类型
// 功能：去除某一个key类型
type Exclude<T, K> = T extends K ? never : T;
type RemoveKindField<T> = {
[K in keyof T as Exclude<K, 'kind'>]: T[K];
};
interface User2 {
name: string;
age: number;
kind: 'kind'
};
type User3 = RemoveKindField<User2>;// {name: string; age: number}
4. keyof usage
1. Keyof application example
//keyof用法
// keyof用法示例
type K1 = keyof boolean; // 'valueof'
type K2 = keyof any;// string | number | symbol
type K3 = keyof number;// "toFixed" | "toExponential" | "toPrecision" | "toString" | "valueOf" | "toLocaleString"
type K4 = keyof string; // "charAt" | "charCodeAt" | "concat" | "indexOf" | "lastIndexOf" | "localeCompare" | "match" | "replace" | "search" | "slice" | "split" | ... 28 more ... | "valueOf"
enum HttpMethods {
Get,
Post,
Put,
Delete
};
type K5 = keyof typeof HttpMethods;// "Get" | "Post" | "Put" | "Delete"
2. Intrinsic implementation of Partial, Required, Pick, and Record tool types
// 基于keyof实现的Partial、Required、Pick、Record工具类型的内在实现
type Partial<T> = {
[K in keyof T]?: T[K]
};
type Required<T> = {
[K in keyof T]-?: T[K];
}
type Pick<T, U extends keyof T> = {
[K in U]: T[K]
};
type Record<T extends keyof any, U> {
[key: T]: U;
}
3. Typical applications of keyof in generic functions
// keyof在泛型函数中的典型应用
type user5 = {
name: string;
age: number;
boo: boolean;
}
type ValueType<T, U> = T extends keyof U ? U[T] : never;
function fn3(obj: user5, key: keyof user5): ValueType<keyof user5, user5> {
return obj[key];
}