Typescript工具類型 - 整理彙總

Typescript工具類型已經內置在es5類型聲明中，無需定義便可使用。

不須要一次記住全部工具，只需留下印象，未來須要時再來查閱便可。文章目錄已經組織成易於查閱的形式。

函數工具

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;

輸入構造函數的類型，輸出構造函數的參數的類型。
例子：

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;

輸入構造函數的類型，輸出實例的類型。
例子：

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;

輸入函數類型，輸出函數的參數的類型。

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。

對象工具

Partial

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

將類型T中的屬性所有變成可選屬性。

Required

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

將類型T中的屬性所有變成必選屬性。

Readonly

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

將類型T中的屬性所有變成只讀屬性。
注意，它僅僅讓對象自己變成immutable（不可對屬性賦值），可是不會改變屬性值的可變性（Immutability）。

相似於淺拷貝與深拷貝的區別。

ReadonlyArray

類型定義比較長。總而言之：

1. 不能調用push、splice等修改數組的操做。
2. 由於包含屬性定義：readonly [n: number]: T;，因此不能對數組元素進行賦值修改。

例子：

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

注意，它僅僅讓數組自己變成immutable（不可對數組項賦值），可是不會改變數組Item的可變性（Immutability）。

相似於淺拷貝與深拷貝的區別。

Pick

/**
 * From T, pick a set of properties whose keys are in the union K
 */
type Pick<T, K extends keyof T> = {
    [P in K]: T[P];
};

從類型T中，選出key爲K的屬性。
例子：

type Result1 = Pick<{ a: number; b: string; c: boolean }, "b" | "c">;
/*
type Result1 = {
    b: string;
    c: boolean;
}
*/

Omit

/**
 * Construct a type with the properties of T except for those in type K.
 */
type Omit<T, K extends keyof any> = Pick<T, Exclude<keyof T, K>>;

從類型T中，過濾key爲K的屬性。
例子：

type Result1 = Omit<{ a: number; b: string; c: boolean }, "b" | "c">;
/*
type Result1 = {
    a: number;
}
*/

Record

/**
 * Construct a type with a set of properties K of type T
 */
type Record<K extends keyof any, T> = {
    [P in K]: T;
};

返回一個對象類型，以K爲key，以T爲value。
例子：

type Result1 = Record<"a" | "b" | "c", string>;
/*
type Result1 = {
    a: string;
    b: string;
    c: string;
}
*/

type Result2 = Record<"a" | "b" | "c" | number, boolean>;
/*
type Result2 = {
    [x: number]: boolean;
    a: boolean;
    b: boolean;
    c: boolean;
}
*/

參考資料

• https://github.com/typescript...
• https://github.com/microsoft/...