Skip to content

内置工具类型

TS提供了多种实用工具类型来帮助常见的类型转换。

分类

根据工具类型的作用将它们分为以下几类:

Awaited

Awaited<T>用来获取Promise返回值类型。

typescript
// 实现原理
type Awaited<T> = T extends Promise<infer U> ? U : T

// 食用方式
type result = Awaited<Promise<string>>
// 结果:string

Partial

Partial<T>将类型中的所有属性设置为可选属性。

typescript
// 实现原理
type Partial<T> = {
  [P in keyof T]?: T[P];
};

// 食用方式
type PartialUser = Partial<{
  name: string;
  age: number;
}>;
// 结果:{ name?: string; age?: number; }

Readonly

Readonly<T>将类型中的所有属性设置为只读属性。

typescript
// 实现原理
type Readonly<T> = {
  readonly [P in keyof T]: T[P];
};

// 食用方式
type ReadonlyUser = Readonly<{
  name: string;
  age: number;
}>;
// 结果:{ readonly name: string; readonly age: number; }

Required

Required<T>将类型中的所有类型设置为必选属性。

typescript
// 实现原理
type Required<T> = {
  [P in keyof T]-?: T[P];
};

// 食用方式
type RequiredUser = Required<{
  name?: string;
  age?: number;
}>;
// 结果:{ name: string; age: number; }

Record

Record<K,T>,用于创建键值映射关系的对象类型。

typescript
// 实现原理
type Record<K extends keyof any, T> = {
  [P in K]: T;
};

// 食用方式
type UserRecord = Record<"name" | "age", string>;
// 结果:{ name: string; age: string; }

Pick

Pick<T,K>从类型T里面选取指定的字段组成新的类型。

typescript
// 实现原理
type Pick<T, K extends keyof T> = {
  [P in K]: T[P];
};
// 食用方式
type PickedUser = Pick<
  {
    name: string;
    age: number;
    email: string;
  },
  "name" | "age"
>;
// 结果:{ name: string; age: number; }

Exclude

Exclude<T,U>用于从联合类型T中排除U的类型。

如果U传递了一个联合类型,它会根据联合类型分发类型的机制,遍历U中每一项类型,并从T中排除。

typescript
// 实现原理
type Exclude<T, U> = T extends U ? never : T;

// 食用方式
type ExcludedType = Exclude<"a" | "b" | "c", "a" | "b">;
// 结果:"c"

Omit

Omit<T,K>,从T中移除指定的属性类型,KT的键组成的联合类型。

typescript
// 实现原理
type Omit<T, K extends keyof any> = {
  [P in Exclude<keyof T, K>]: T[P];
};

// 食用方式
type OmittedUser = Omit<
  {
    name: string;
    age: number;
    email: string;
  },
  "email"
>;
// 结果:{ name: string; age: number; }

Extract

Extract<T,U>用于从联合类型T中提取特定的类型U,如果U是一个联合类型,那么会根据分发类型的特性,提取所有符合U的类型组成一个新的类型。

typescript
// 实现原理
type Extract<T, U> = T extends U ? T : never;

// 食用方式
type ExtractedType = Extract<"a" | "b" | "c", "a" | "b">;
// 结果:"a" | "b"

NonNullable

NonNullable<T>用于排除类型T中的nullundefined

typescript
// 实现原理
type NonNullable<T> = T extends null | undefined ? never : T;

// 食用方式
type NonNullableType = NonNullable<string | null | undefined>;
// 结果:string

Parameters

Parameters<T>用于提取函数参数的类型,如果传递的类型不符合函数的类型收窄,会返回never

typescript
// 实现原理
type Parameters<T extends (...args: any) => any> = T extends (...args: infer P) => any ? P : never;

// 食用方式
type FunctionParams = Parameters<(a: string, b: number) => void>;
// 结果:[string, number]

ConstructorParameters

ConstructorParameters<T>用于提取构造函数的参数类型。

typescript
// 实现原理
type ConstructorParameters<T extends new (...args: any) => any> = T extends new (...args: infer P) => any ? P : never;

// 食用方式
type ClassParams = ConstructorParameters<new (name: string, age: number) => { name: string; age: number }>;
// 结果:[string, number]

ReturnType

ReturnType<T>用于提取函数的返回值类型。

typescript
// 实现原理
type ReturnType<T extends (...args: any) => any> = T extends (...args: any) => infer R ? R : never;

// 食用方式
type FunctionReturnType = ReturnType<() => string>;
// 结果:string

InstanceType

InstanceType<T>用于提取实例对象类型。

typescript
// 实现原理
type InstanceType<T extends new (...args: any) => any> = T extends new (...args: any) => infer R ? R : never;

// 食用方式
type ClassInstanceType = InstanceType<new (name: string, age: number) => { name: string; age: number }>;
// 结果:{ name: string; age: number }

ThisParameterType

ThisParameterType<T>用于提取传递this的函数的this类型。

typescript
// 实现原理
type ThisParameterType<T> = T extends (this: infer U, ...args: never) => any ? U : unknown;

// 食用方式
type FunctionType = ThisParameterType<(this: { name: string; age: number }) => void>;
// 结果:{ name: string; age: number }

OmitThisParameter

OmitThisParameter<T>用于从类型T中提取参数以及实例对象的类型组成函数返回。

typescript
// 实现原理
type OmitThisParameter<T> = T extends (this: any, ...args: infer P) => infer R ? (...args: P) => R : never;

// 食用方式
type OmittedThisFunction = OmitThisParameter<(this: { name: string }) => string>;
// 结果:() => string

ThisType

ThisType<T>可以在对象字面量中键入this,并提供通过上下文类型控制 this 类型的便捷方式,其只有在 --noImplicitThis 的选项下才有效

typescript
// 实现原理
type ThisType<T> = {
  [P in keyof T]: T[P];
} & { this: T };

// 食用方式
type ThisTypeExample = ThisType<{ name: string; age: number }>;
// 结果:{ name: string; age: number; this: { name: string; age: number } }

Lowercase

字符操作工具,用于将字符串转成小写。

typescript
// 实现原理
type Lowercase<S extends string> = S extends `${infer T}${infer U}` ? `${Lowercase<T>}${U}` : S;

// 食用方式
type LowercaseExample = Lowercase<"HELLO WORLD">;
// 结果:"hello world"

Uppercase

用于将字符串转成大写。

typescript
// 实现原理
type Uppercase<S extends string> = S extends `${infer T}${infer U}` ? `${Uppercase<T>}${Lowercase<U>}` : S;

// 食用方式
type UppercaseExample = Uppercase<"hello world">;
// 结果:"HELLO WORLD"

Capitalize

用于将字符串首字母转成大写。

typescript
// 实现原理
type Capitalize<S extends string> = S extends `${infer T}${infer U}` ? `${Uppercase<T>}${Lowercase<U>}` : S;

// 食用方式
type CapitalizeExample = Capitalize<"hello world">;
// 结果:"Hello world"

Uncapitalize

将字符串首字母转成小写。

typescript
// 实现原理
type Uncapitalize<S extends string> = S extends `${infer T}${infer U}` ? `${Lowercase<T>}${U}` : S;

// 食用方式
type UncapitalizeExample = Uncapitalize<"Hello World">;
// 结果:"hello World"

如有转载或 CV 的请标注本站原文地址