Typescript工具类型 - 整理汇总

时间 2019-11-08

标签 typescript 工具类型整理汇总繁體版

原文原文链接

Typescript工具类型已经内置在es5类型声明中，无需定义便可使用。react

不须要一次记住全部工具，只需留下印象，未来须要时再来查阅便可。文章目录已经组织成易于查阅的形式。

函数工具

ConstructorParameters

/**
 * Obtain the parameters of a constructor function type in a tuple
 */
type ConstructorParameters<T extends new (...args: any) => any> = T extends new (...args: infer P) => any ? P : never;

输入构造函数的类型，输出构造函数的参数的类型。
例子：git

class Animal {
  constructor(name: string, age: number) {
    return {
      name,
      age
    };
  }
}
type Result = ConstructorParameters<typeof Animal>;
// type Result = [string, number]

InstanceType

/**
 * Obtain the return type of a constructor function type
 */
type InstanceType<T extends new (...args: any) => any> = T extends new (...args: any) => infer R ? R : any;

输入构造函数的类型，输出实例的类型。
例子：github

class Animal {
  constructor(name: string, age: number) {
    return {
      name,
      age
    };
  }
}
type Result = InstanceType<typeof Animal>;
// type Result = Animal

Parameters

/**
 * Obtain the parameters of a function type in a tuple
 */
type Parameters<T extends (...args: any) => any> = T extends (...args: infer P) => any ? P : never;

输入函数类型，输出函数的参数的类型。typescript

ReturnType

/**
 * Obtain the return type of a function type
 */
type ReturnType<T extends (...args: any) => any> = T extends (...args: any) => infer R ? R : any;

输入函数类型，输出函数的返回值的类型。数组

集合论工具

Exclude

/**
 * Exclude from T those types that are assignable to U
 */
type Exclude<T, U> = T extends U ? never : T;

从T类型中剔除U类型。
注意，只能用于从并类型(Type1|Type2)中剔除其中的类型。不支持更加精确的剔除（好比从string里剔除'1'）。
例子：函数

type Result = Exclude<"1" | "2", "2" | "3">;
// type Result = "1"

type Result2 = Exclude<string, '1'>;
// type Result2 = string

type Result3 = Exclude<{a: string | number}, {a: number}>;
/*
type Result3 = {
    a: string | number;
}
*/

Extract

/**
 * Extract from T those types that are assignable to U
 */
type Extract<T, U> = T extends U ? T : never;

从T类型中选择U类型。
注意，只能用于从并类型(Type1|Type2)中选择其中的类型。不支持更加精确的选择（好比从string里选择'1'）。
例子：工具

type Result1 = Extract<"1" | "2", "2" | "3">;
// type Result1 = "2"

type Result2 = Extract<string, "1">;
// type Result2 = never

type Result3 = Extract<{ a: number }, { a: string | number }>;
/*
type Result3 = {
    a: number;
}
*/
type Result4 = Extract<string | number, number | boolean>;
// type Result4 = number

NonNullable

/**
 * Exclude null and undefined from T
 */
type NonNullable<T> = T extends null | undefined ? never : T;

从T类型中剔除null和undefined。ui

对象工具

Partial

type Partial<T> = {
    [P in keyof T]?: T[P];
};

将类型T中的属性所有变成可选属性。es5

Required

/**
 * Make all properties in T required
 */
type Required<T> = {
    [P in keyof T]-?: T[P];
};

将类型T中的属性所有变成必选属性。code

Readonly

/**
 * Make all properties in T readonly
 */
type Readonly<T> = {
    readonly [P in keyof T]: T[P];
};

将类型T中的属性所有变成只读属性。
注意，它仅仅让对象自己变成immutable（不可对属性赋值），可是不会改变属性值的可变性（Immutability）。

相似于浅拷贝与深拷贝的区别。

ReadonlyArray

类型定义比较长。总而言之：

不能调用push、splice等修改数组的操做。
由于包含属性定义：readonly [n: number]: T;，因此不能对数组元素进行赋值修改。

例子：

let arr: ReadonlyArray<string> = ["a", "b"];
arr.push("c"); // error
arr[0] = "c"; // error

注意，它仅仅让数组自己变成immutable（不可对数组项赋值），可是不会改变数组Item的可变性（Immutability）。