一看就懂的TypeScript工具類型
TypeScript是一種靜態(tài)類型檢查的編程語言，它內(nèi)置了許多基本數(shù)據(jù)類型，如字符串、數(shù)字和布爾型等。除了基本數(shù)據(jù)類型，當(dāng)某種類型對(duì)于大多數(shù)代碼來說都非常有用時(shí)，它們就會(huì)被添加到TypeScript中并且被大家使用而無需擔(dān)心它們的可用性。這些內(nèi)置在TS中的類型我們稱之為工具類型，這些工具類型位于TS安裝目錄typescript/lib/lib.es5.d.ts，熟悉這些工具類型，可以幫助我們提高開發(fā)效率。
Partial<T>、Required<T> 與 Readonly<T>
該組工具類型為改操作的工具類型，具體為將類型T的所有屬性都改為可選、必選或只讀。
定義：
/**
* Make all properties in T optional
*/
type Partial<T> = {
[P in keyof T]?: T[P];
};
/**
* Make all properties in T required
*/
type Required<T> = {
[P in keyof T]-?: T[P];
};
/**
* Make all properties in T readonly
*/
type Readonly<T> = {
readonly [P in keyof T]: T[P];
};知識(shí)點(diǎn)：
in：關(guān)鍵字，用來實(shí)現(xiàn)遍歷;
keyof：關(guān)鍵字，索引類型查詢，用來獲取類型的所有鍵，返回的類型是聯(lián)合類型;
?：修飾符，表示可選屬性;
readonly：修飾符，表示只讀屬性;
-：修飾符，添加在“?”或"readonly"修飾符之前，表示移除“?”或"readonly"修飾符。
作用：
Partial，將T類型中的所有屬性變?yōu)榭蛇x屬性; Required，將T類型中的所有屬性變?yōu)楸剡x屬性; Readonly，將T類型中的所有屬性變?yōu)橹蛔x屬性。
應(yīng)用：
interface Text {
size: number
color: string
}
type T = Partial<Text>
type R = Required<Text>
type O = Readonly<Text>新定義的T類型中的屬性均為Text類型屬性，且均為可選；新定義的R類型中的屬性均為Text類型屬性，且均為必選；新定義的O類型中的屬性均為Text類型屬性，且均為只讀。
Record<K,T>
該類型可視作增操作相關(guān)的工具類型，根據(jù)我們指定的鍵值類型，新增一個(gè)對(duì)象類型。
定義：
/**
* Construct a type with a set of properties K of type T
*/
type Record<K extends keyof any, T> = {
[P in K]: T;
};知識(shí)點(diǎn)：
keyof any：上面介紹過keyof（關(guān)鍵字，用來獲取類型的所有鍵，返回的類型是聯(lián)合類型），當(dāng)對(duì)any使用keyof索引類型查詢時(shí)，結(jié)果類型為固定的聯(lián)合類型“string | number | symbol”；
K extends keyof any：泛型約束，定義了類型K的最大范圍為聯(lián)合類型“string | number | symbol”。
作用：
根據(jù)給定的屬性名類型和屬性類型創(chuàng)建一個(gè)新的對(duì)象類型。
應(yīng)用：
type K = 'size'|'color'
type T = number
type R = Record<K, T>新定義的R類型，包括屬性size和color，且類型均為number。
Exclude<T,U> 與 Extract<T,U>
該組類型可以視作查操作相關(guān)的工具類型，查出T類型中與U類型無關(guān)的屬性或相關(guān)的屬性。
定義：
/**
* Exclude from T those types that are assignable to U
*/
type Exclude<T, U> = T extends U ? never : T;
/**
* Extract from T those types that are assignable to U
*/
type Extract<T, U> = T extends U ? T : never;知識(shí)點(diǎn)：
T extends U ? X : Y：條件類型，extends是關(guān)鍵字，若類型T能夠賦值給類型U，則條件類型的結(jié)果為類型X，否則為類型Y。
作用：
根據(jù)條件類型的定義，Exclude類型中若T類型中的屬性存在于U類型，則返回never，也就是從類型T中剔除所有類型U的屬性。Extract則恰恰和Exclude相反，返回類型T和類型U的交集。
應(yīng)用：
interface Text {
size: number
color: string
}
interface Img {
width: number
color: string
}
type T = Exclude<Text,Img>
type R = Extract<Text,Img>新定義的T類型，只有size屬性；新定義的R類型，只包含color屬性。
Pick<T,K>、Omit<T,K>與NonNullable
該組工具類型為刪操作相關(guān)的工具類型，包括剔除與指定鍵相關(guān)、無關(guān)或null、undefined類型操作的工具類型。
定義：
/**
* 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];
};
/**
* 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>>;
/**
* Exclude null and undefined from T
*/
type NonNullable<T> = T extends null | undefined ? never : T;作用：
Pick類型從已有對(duì)象類型T中選取選定的屬性及其類型K創(chuàng)建新的類型。Omit與Pick類型相反，從已有對(duì)象類型T中剔除選定的屬性及其類型K創(chuàng)建新的類型。NonNullable與Omit相似，返回的結(jié)果為從T類型中剔除null and undefined類型。
應(yīng)用：
interface Text {
size: number
color: string
}
type T = Pick<Text,'size'>
type R = Omit<Text,'size'>
type N = NonNullable<Text|null|undefinde>新定義的T類型，只包括Text類型中的屬性size及其類型；新定義的T類型，只包括Text類型中的屬性color及其類型；新定義的N類型，只包括Text類型。
Parameters、ConstructorParameters、ReturnType與InstanceType
該組工具類型為與函數(shù)相關(guān)的工具類型，包括獲取普通函數(shù)參數(shù)和返回值的工具類型和獲取構(gòu)造函數(shù)參數(shù)和返回值的構(gòu)造類型。
定義：
/**
* 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;
/**
* 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;
/**
* Obtain the return type of a function type
*/
type ReturnType<T extends (...args: any) => any> = T extends (...args: any) => infer R ? R : any;
/**
* 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;知識(shí)點(diǎn)：
infer：關(guān)鍵字，在extends條件類型語句（T extends U ？X : Y）中，允許在類型U的位置上使用關(guān)鍵字infer定義可推斷的類型變量，可推斷的類型變量只允許在類型X的位置上使用。簡單應(yīng)用如下，取出數(shù)組中的類型：
type ExtractArrayItemType<T> = T extends (infer U)[] ? U : T;
// 條件判斷為 true，返回 U
type T = ExtractArrayItemType<string[]>; // string作用：
Parameters工具類型能夠獲取函數(shù)類型的參數(shù)類型，并使用參數(shù)類型構(gòu)造一個(gè)元組類型; ConstructorParameters工具類型可以把構(gòu)造函數(shù)的參數(shù)類型作為一個(gè)元組類型返回；ReturnType工具類型可以獲取函數(shù)的返回值類型; InstanceType工具類型可以獲取構(gòu)造函數(shù)的返回類型；
應(yīng)用：
type Fn = (a: string, b: number) => string;
type FnParamTypes = Parameters(Fn); // [string, number]
type FnReturnType = ReturnType(Fn); // string
interface FunctionConstructor {
new(...args: string[]): Function;
(...args: string[]): Function;
readonly prototype: Function;
}
type ConstructorParamTypes = ConstructorParameters(FunctionConstructor) // string[]
type ConstructorInstanceType = InstanceType(FunctionConstructor) // FunctionThisParameterType、OmitThisParameter與ThisType
該組類型均為與this相關(guān)的工具類型。
定義：
/**
* Extracts the type of the 'this' parameter of a function type, or 'unknown' if the function type has no 'this' parameter.
*/
type ThisParameterType<T> = T extends (this: infer U, ...args: any[]) => any ? U : unknown;
/**
* Removes the 'this' parameter from a function type.
*/
type OmitThisParameter<T> = unknown extends ThisParameterType<T> ? T : T extends (...args: infer A) => infer R ? (...args: A) => R : T;
/**
* Marker for contextual 'this' type
*/
interface ThisType<T> { }知識(shí)點(diǎn)：
unknown：頂端類型，TypeScript中僅有any和unknown兩種頂端類型，所有其他類型都可以賦值給兩者，但unknown只能賦值給any類型和unknown類型。TypeScript中只有一個(gè)尾端類型never，是其他所有類型的子類型。
作用 ThisParameterType類型可以獲取函數(shù)參數(shù)中this參數(shù)的類型；OmitThisParameter類型可以剔除函數(shù)參數(shù)中this參數(shù)的類型；ThisType類型可以對(duì)象字面量中this的類型。
應(yīng)用
interface Foo {
x: number
};
function fn(this: Foo) {}
type Test = ThisParameterType<typeof fn>; // Foo
type Fn = (this: Foo) => void
type NonReturnFn = OmitThisParameter<Fn>; // () => void
let obj: ThisType<{x: number, getX: () => number}>
obj = {
x: 100,
getX(){
return this.x
}
}以上簡單介紹了TypeScript中的自帶工具類型，TypeScript與JavaScript有相通之處，但又有更多的不同和背景知識(shí)，只有內(nèi)化了這些知識(shí)同時(shí)不斷地練習(xí)才能有效掌握這一門語言。
