大家好!我 HoMeTown。
ts内置的高级类型
Parameters
用于提取函数的类型
源码:
type Parameters<T extends (...args: any) => any> = T extends (...args: infer P) => any ? P : never;
使用:
/** Parameters 用于提取函数类型 */
type res1 = Parameters<(name: string) => string> // [name: string]
ReturnType
用于提取函数类型的返回值类型
源码:
type ReturnType<T extends (...args: any) => any> = T extends (...agrs: any) => infer R ? R : never;
使用:
/** ReturnType 用于提取函数类型的返回值类型 */
type res2 = ReturnType<(name: string) => string> // string
Partial
索引类型可以通过映射类型的语法做修改,把索引变成可选
源码:
type Partial<T> => {
[P in keyof T]?: T[P]
}
使用:
type res3 = Partial<{name: string; age: number;}> // {name?: string | undefined; age?: number | undefined;}
Required
把索引变为必选
源码:
type Required<T> = {
[P in keyof T]-?: T[P];
};
使用:
type res4 = Required<Partial<{name: string; age: number;}>> // {name: string | undefined; age: number | undefined;}
Readonly
添加 readonly 的修饰
源码:
type Readonly<T> = {
readonly [P in keyof T]: T[P];
};
使用:
type res5 = Readonly<{name: string; age: number;}> // {readonly name: string; readonly age: number;}
Pick
映射类型的语法用于构造新的索引类型,在构造的过程中可以对索引和值做一些修改或过滤。
源码:
type Pick<T, K extends keyof T> = {
[P in K]: T[P]
}
使用:
type res6 = Pick<{name: string; age: number}, 'age'> // { age: number;}
Record
Record 用于创建索引类型,传入 key 和值的类型
源码:
type Record<K extends keyof any, T> = {
[P in K]: T;
}
使用:
type res7 = Record<string, any> // { [x: string]: any; }
type res8 = Record<'age' | 'count', number> // { age: number;count: number; }
Exclude
用于从联合类型中去除一部分类型
源码:
type Exclude<T, U> = T extends U ? never : T;
使用:
type res9 = Exclude<'age' | 'name', 'age'> // "name"
Extract
用于从联合类型中取交集
源码:
type Extract<T, U> = T extends U ? T : never?
使用:
type res10 = Extract<'age' | 'name', 'name' | "gender"> // "name"
Omit
从索引类型中删除一部分
源码:
type Omit<T, K extends keyof any> = Pick<T, Exclude<keyof T, K>>;
使用:
type res11 = Omit<{name: string; age: number}, 'age'> // { name: string;}
Awaited
获取Promise的ValueType
源码:
类型参数 T是 null或者undefined,直接返回T
如果T是对象,并且有then方法,那就提取then的参数,局部变量F
继续提取F的参数变量V,递归提取V
type MyAwaited<T> = T extends null | undefined
? T
: T extends object & { then(onfulfilled: infer F): any }
? F extends (value: infer V, ...args: any) => any
? Awaited<V>
: never
: T;
type res12 = MyAwaited<Promise<Promise<1>>>;
使用:
type res12 = MyAwaited<Promise<Promise<1>>>; // 1
NonNullable
用于判断是否为空类型,也就是 是不是null或者undefined的类型:
源码:
type NonNullable<T> = T extends null | undefined ? never : T;
使用:
type res13 = NonNullable<null> // never
type res14 = NonNullable<'123'> // '123'
Uppercase、Lowercase、Capitalize、Uncapitalize
分别实现,大写、小写、首字母大写、去除首字母大写:
源码:
type Uppercase<S extends string> = intrinsic;
type Lowercase<S extends string> = intrinsic;
type Capitalize<S extends string> = intrinsic;
type Uncapitalize<S extends string> = intrinsic;
intrinsic 是固有的意思,类似js中有的内置方法打印时会显示[native code]一样,意味着4个方法不是在ts中实现的,而是编译过程中,由js实现。
使用:
type res15 = Uppercase<'hometown'> // HOMETOWN
type res16 = Lowercase<'HOMETOWN'> // hometown
type res17 = Capitalize<'hometown'> // Hometown
type res18 = Uncapitalize<'Hometown'> // hometown
下次见~ 我的朋友,我是
HoMeTown👨💻,➕我VX,💊你进群,这是一个大家共同成长、共同学习的社群!在这里你可以:讨论技术问题、了解前端资讯、打听应聘公司、获得内推机会、聊点有的没的。👉 vx:
hometown-468【单独拉你】👨👩👧 公众号:
秃头开发头秃了【关注回复“进群”】🤖 Blog:HoMeTown'Blog【点开看看】