超好用 TypeScript中内置的高级类型!集合!

454 阅读3分钟

大家好!我 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【点开看看】

高赞好文