TypeScript 官方工具类型

在 TypeScript 中提供了许多自带的工具类型，因为这些类型都是全局可用的，所以无须导入即可直接使用。

操作接口类型

Partial

Partial 可以将一个类型的所有属性变成可选的，并且改工具类型返回的类型时给定类型的子集。

type Partial<T> = {
  [P in keyof T]?: T[P];
}; // 这里无需手动写，本身已经存在
interface Person {
  name: string;
  age?: number;
  weight?: number;
}
type PartialPerson = Partial<Person>;
// 相当于
interface PartialPerson {
  name?: string;
  age?: number;
  weight?: number;
}

Required

Required 可以将给定类型的所有属性都变成必填的。

type Required<T> = {
  [P in keyof T]-?: T[P];
} // 这里无需手动写，本身已经存在
interface Person {
  name: string;
  age?: number;
  weight?: number;
}
type ReuiredPerson = Required<Person>;
// 相当于
interface RequiredPerson {
  name: string;
  age: number;
  weight: number;
}

映射类型在键值的后面使用了一个 - 符号，- 与 ? 组合起来表示去除类型的可选属性，因此给定类型的所有属性都变为了必填。

Readonly

Readonly 将给定类型的所有属性设置为只读，给定类型的属性不可以被重选赋值。

type Readonly<T> =  {
  readonly [P in keyof T]: T[P];
} // 这里无需手动写，本身已经存在
interface Person {
  name: string;
  age?: number;
  weight?: number;
}
type NewPerson = Readonly<Person>;
// 相当于
interface ReadonlyPerson {
  readonly name: string;
  readonly age?: number;
  readonly weight?: number;
}

Pick

Pick 将给定的类型中选取指定的键值，然后组成一个新的类型

type Pick<T, K extends keyof T> = {
  [P in K]: T[P];
} // 这里无需手动写，本身已经存在
interface Person {
  name: string;
  age?: number;
  weight?: number;
}
type NewPerson = Pick<Person, 'name' | 'age'>
// 相当于
interface NewPerson {
  name: string;
  age?: number;
}

Omit

Omit 将返回去除指定键值之后的新类型。

type Omit<T, K extends keyof any> = Pick<T, Exclude<keyof T, K>>; // 这里无需手动写，本身已经存在
interface Person {
  name: string;
  age?: number;
  weight?: number;
}
type NewPerson = Omit<Person, 'weight'>;
// 相当于
interface NewPerson {
  name: string;
  age?: number;
}

Exclude 工具类型的作用就是从入参 T 属性的联合类型中排除入参 K 指定的若干属性。

联合类型

Exclude

Exclude 从联合类型中去除指定的类型。

interface Person {
  name: string;
  age?: number;
  weight?: number;
}
type Exclude<T, U> = T extends U ? never : T; // 这里无需手动写，本身已经存在
type T = Exclude<'a' | 'b' | 'c', 'a'>; // => 'b' | 'c'
type NewPerson = Omit<Person, 'weight'>;
// 相当于
type NewPerson = Pick<Person, Exclude<keyof Person, 'weight'>>;
// 其中
type ExcludeKeys = Exclude<keyof Person, 'weight'>; // => 'name' | 'age'

Extract

Extract 从联合类型中选取指定的类型

type Extract<T, U> = T extends U ? T : never;
type T = Extract<'a' | 'b' | 'c', 'a'>; // => 'a'

基于 Extract 实现一个获取接口类型交集的工具类型。

type Intersect<T, U> = {
  [K in Extract<keyof T, keyof U>]: T[K];
};
interface Person {
  name: string;
  age?: number;
  weight?: number;
}
interface NewPerson {
  name: string;
  age?: number;
}
type T = Intersect<Person, NewPerson>;
// 相当于
type T = {
  name: string;
  age?: number;
};

NoNullable

NoNullable 的作用是从联合类型中去除 null 和 undefined 的类型。

type NewNonNullable<T> = T extends undefined | null ? never : T;
type NewNonNullable1<T>  = Exclude<T, undefined | null>;
type N = NewNonNullable<string | number | null | undefined>;
const NCONST: N= 1;

Record

Record 用于生成接口类型，传入的泛型参数分为作为接口类型的属性和值。

type Record<K extends keyof any, T> = {
  [P in K]: T;
};
type MenuKey = 'home' | 'about' | 'more';
interface Menu {
  label: string;
  hidden?: boolean;
}
const menus: Record<MenuKey, Menu> = {
  about: { label: '关于' },
  home: { label: '主页' },
  more: { label: '更多', hidden: true },
};

函数类型

ConstructorParameters

ConstructorParameters，获取构造函数的参数

class ColorClass {
  constructor(name: string, age: number, isChina: boolean) {}
}
let params: ConstructorParameters<typeof ColorClass>;
// let params: [string, number, boolean]

Parameters

获取函数的参数。Parameters 可以用来获取函数的参数并返回

function Fn(name: string, age: number, isChina: boolean) {}
let fnP: Parameters<typeof Fn>;
// let fnP: [string, number, boolean]

ReturnType

获取函数的返回类型。

function Fn(name: string, age: number, isChina: boolean) {
  return 1;
}
let returnType: ReturnType<typeof Fn>;
// let returnType: number

ThisParameterType

ThisParameterType 获取函数 this 参数类型

function Fn(this: Window, name: string, age: number, isChina: boolean) {
  return 1;
}
let thisParameterType: ThisParameterType<typeof Fn>;
// let thisParameterType: Window

ThisType

在对象字面量上指定 this 的类型。

注意：如果你想使用这个工具类型，那么需要开启noImplicitThis的 TypeScript 配置。

OmitThisParameter

OmitThisParameter 用来去除函数参数中 this 类型。

字符串类型

模板字符串

注意：TypeScript 自 4.1版本起开始支持模板字符串字面量类型。

// 转换字符串字面量到大写字母
type Uppercase<S extends string> = intrinsic;
// 转换字符串字面量到小写字母
type Lowercase<S extends string> = intrinsic;
// 转换字符串字面量的第一个字母为大写字母
type Capitalize<S extends string> = intrinsic;
// 转换字符串字面量的第一个字母为小写字母
type Uncapitalize<S extends string> = intrinsic;
type T0 = Uppercase<'Hello'>; // => 'HELLO'
type T1 = Lowercase<T0>; // => 'hello'
type T2 = Capitalize<T1>; // => 'Hello'
type T3 = Uncapitalize<T2>; // => 'hello'