摘要：官方文檔高級(jí)類型優(yōu)先閱讀，建議閱讀英文文檔。關(guān)鍵字這個(gè)關(guān)鍵字是在版本引入的在條件類型語句中，該關(guān)鍵字用于替代手動(dòng)獲取類型。源碼解釋使用條件判斷完成示例官方作用該類型可以獲得函數(shù)的參數(shù)類型組成的元組類型。
學(xué)習(xí) TypeScript 到一定階段，必須要學(xué)會(huì)高階類型的使用，否則一些復(fù)雜的場(chǎng)景若是用 any 類型來處理的話，也就失去了 TS 類型檢查的意義。
本文羅列了 TypeScript 常用的高階類型，包含 官方 、以及 常用的非官方 的高級(jí)類型聲明，該手冊(cè)直接硬啃的話有些枯燥，適合平時(shí)快速查閱，使用 Ctrl+F 來查找關(guān)鍵詞來定位即可。
官方文檔 - 高級(jí)類型：優(yōu)先閱讀，建議閱讀英文文檔。附 中文文檔，有人做了專門的讀書筆記 Typescript學(xué)習(xí)記錄：高級(jí)類型
TypeScript: Built-in generic types：推薦，用案例詳細(xì)解釋高階類型的使用；
TS 一些工具泛型的使用及其實(shí)現(xiàn)：TS 內(nèi)置工具泛型高階使用
TypeScript 2.1 新特性一覽：查找/映射類型及 any 類型的推斷 都是在 2.1 版本引入的
TypeScript 2.8：Exclude 等條件類型是在 2.8 版本引入的，附中文 TypeScript 2.8 引入條件類型
lib.es2015.d.ts：大部分的聲明在這個(gè)文件中可以找到
TypeScript 強(qiáng)大的類型別名：行文結(jié)構(gòu)比較合理，也比較完善，可以當(dāng)手冊(cè)來查
1、基礎(chǔ)
1.1、交叉類型
交叉類型是將 多個(gè)類型合并為一個(gè)類型。 這讓我們可以把現(xiàn)有的多種類型疊加到一起成為一種類型，它包含了所需的所有類型的特性。
Person & Serializable & Loggable
同時(shí)是 Person 和 Serializable 和 Loggable。
就是說這個(gè)類型的對(duì)象同時(shí)擁有了這三種類型的成員
示例：extend 融合方法
function extend(first: T, second: U): T & U {
let result = {};
for (let id in first) {
(result)[id] = (first)[id];
}
for (let id in second) {
if (!result.hasOwnProperty(id)) {
(result)[id] = (second)[id];
}
}
return result;
}
特殊情況：
T | never = T
T & never = never (which #16446 provides)
1.2、extends 關(guān)鍵字
T extends U ? X : Y
表示，如果 T 可以賦值給 U （類型兼容），則返回 X，否則返回 Y；
1.3、使用 keyof 和 in
keyof 可以用來取得一個(gè)對(duì)象接口的所有 key 值：
interface Foo {
name: string;
age: number
}
type T = keyof Foo // -> "name" | "age"
而 in 則可以遍歷枚舉類型, 例如：
type Keys = "a" | "b"
type Obj = {
[p in Keys]: any
} // -> { a: any, b: any }
keyof 產(chǎn)生聯(lián)合類型, in 則可以遍歷枚舉類型, 所以他們經(jīng)常一起使用。
1.4、infer 關(guān)鍵字
infer 這個(gè)關(guān)鍵字是在 TS 2.8 版本引入的, 在條件類型語句中，該關(guān)鍵字用于替代手動(dòng)獲取類型。
TypeScript 為此提供了一個(gè)示例，他們創(chuàng)建了一個(gè)叫作 Flatten 的類型，用于將數(shù)組轉(zhuǎn)成他們需要的元素類型：
type Flatten = T extends any[] ? T[number] : T;
如果使用關(guān)鍵字 infer 就可以將上面的代碼簡化成：
type Flatten = T extends Array ? U : T;
2、映射類型
2.1、Partial（官方）
作用：將傳入的屬性變?yōu)榭蛇x項(xiàng)
源碼：
type Partial = { [P in keyof T]?: T[P] };
解釋：
keyof T 拿到 T 所有屬性名
然后 in 進(jìn)行遍歷, 將值賦給 P, 最后 T[P] 取得相應(yīng)屬性的值.
結(jié)合中間的 ? 我們就明白了 Partial 的含義了.
擴(kuò)展：內(nèi)置的 Partial 有個(gè)局限性，就是只支持處理第一層的屬性，如果是嵌套多層的就沒有效果了，不過可以如下自定義：
type PowerPartial = {
// 如果是 object，則遞歸類型
[U in keyof T]?: T[U] extends object
? PowerPartial
: T[U]
};
2.2、Required（官方）
作用：將傳入的屬性變?yōu)楸剡x項(xiàng)
源碼：
type Required = { [P in keyof T]-?: T[P] };
解釋：
我們發(fā)現(xiàn)一個(gè)有意思的用法 -?， 這里很好理解就是將可選項(xiàng)代表的 ? 去掉， 從而讓這個(gè)類型變成必選項(xiàng)
與之對(duì)應(yīng)的還有個(gè) +? , 這個(gè)含義自然與 -? 之前相反, 它是用來把屬性變成可選項(xiàng)的
2.3、Readonly（官方）
作用：將傳入的屬性變?yōu)橹蛔x選項(xiàng)
源碼：
type Readonly = { readonly [P in keyof T]: T[P] };
擴(kuò)展：在 巧用 Typescript 中，作者創(chuàng)建了 DeepReadonly 的聲明，使用 遞歸 的思想讓任何子屬性都不可更改
type DeepReadonly = {
readonly [P in keyof T]: DeepReadonly;
}
const a = { foo: { bar: 22 } }
const b = a as DeepReadonly
b.foo.bar = 33 // Hey, stop!
2.4、Mutable（第三方）
作用：將 T 的所有屬性的 readonly 移除
源碼：
type Mutable = {
-readonly [P in keyof T]: T[P]
}
解釋：
這一對(duì)加減符號(hào)操作符 + 和 -, 進(jìn)行的不是變量的之間的進(jìn)行加減而是對(duì) readonly 屬性進(jìn)行加減
2.5、Record（官方）
作用：將 K 中所有的屬性的值轉(zhuǎn)化為 T 類型
源碼：
type Record = { [P in K]: T };
示例：
// 對(duì)所有 T 類型的屬性 K, 將它轉(zhuǎn)換為 U
function mapObject(obj: Record, f: (x: T) => U): Record;
const names = { foo: "hello", bar: "world", baz: "bye" };
const lengths = mapObject(names, s => s.length); // { foo: number, bar: number, baz: number }
2.6、Pick（官方）
作用：從 T 中取出 一系列 K 的屬性
源碼：
type Pick = { [P in K]: T[P] };
示例：
// 從 T 挑選一些屬性 K
declare function pick(obj: T, ...keys: K[]): Pick;
const nameAndAgeOnly = pick(person, "name", "age"); // { name: string, age: number }
3、條件類型
3.1、Exclude（官方）
某些地方也稱為 Diff
作用：從 T 中剔除可以賦值給 U 的類型，換言之就是從T 中排除 U
源碼：
type Exclude = T extends U ? never : T;
解釋：
在 ts 2.8 中引入了一個(gè)條件類型, T extends U ? X : Y 表示如果 T 是 U 的子類型的話，那么就會(huì)返回 X，否則返回 Y
對(duì)于聯(lián)合類型來說會(huì)自動(dòng)分發(fā)條件，例如 T extends U ? X : Y, T 可能是 A | B 的聯(lián)合類型, 那實(shí)際情況就變成(A extends U ? X : Y) | (B extends U ? X : Y)
示例：
type T = Exclude<1 | 2, 1 | 3> // -> 2
參考文檔：
Add support for literal type subtraction
TypeScript在React高階組件中的使用技巧
3.2、Extract（官方）
作用：從 T 中提取出包含在 U 的類型，換言之就是從T 中提取出 U 子集
源碼：
type Extract = T extends U ? T : never;
示例：
type T = Extract<1 | 2, 1 | 3> // -> 1
3.3、Omit (第三方)
作用：從 T 中忽略在 K 中的屬性名 ，實(shí)現(xiàn)忽略對(duì)象某些屬性功能，多在高階組件中使用
源碼：
type Omit = Pick>
示例：
type Foo = Omit<{name: string, age: number}, "name"> // -> { age: number }
3.4、Overwrite（第三方）
作用： T 中的定義被在 K 中的內(nèi)容所覆蓋，多在高階組件中使用，內(nèi)部借助 Diff 操作實(shí)現(xiàn)
源碼：
type Overwrite = { [P in Exclude]: T[P] } & U;
示例：
type Item1 = { a: string, b: number, c: boolean };
type Item2 = { a: number };
type T3 = Overwrite // { a: number, b: number, c: boolean };
3.5、ReturnType (官方)
作用：從 T 中忽略在 K 中的屬性名 ，實(shí)現(xiàn)忽略對(duì)象某些屬性功能，多在高階組件中使用
源碼：
type ReturnType = T extends (
...args: any[]
) => infer R
? R
: any;
解釋：
我們可以用 infer 聲明一個(gè)類型變量，是用它獲取函數(shù)的返回類型，簡單說就是用它取到函數(shù)返回值的類型方便之后使用.
示例：
function foo(x: number): Array {
return [x];
}
type fn = ReturnType;
4、函數(shù)相關(guān)
4.1、ThisType(官方)
作用：用于指定上下文對(duì)象類型的
源碼：
// node_modules/typescript/lib/lib.es5.d.ts
interface ThisType { }
解釋：
可以看到聲明中只有一個(gè)接口，沒有任何的實(shí)現(xiàn)
說明這個(gè)類型是在 TS 源碼層面支持的，而不是通過類型變換。
示例：
interface Person {
name: string;
age: number;
}
const obj: ThisType = {
dosth() {
this.name // string
}
}
這樣的話，就可以指定 obj 里的所有方法里的上下文對(duì)象改成 Person 這個(gè)類型了
4.2、InstanceType(官方)
作用：用于獲取構(gòu)造函數(shù)類型的實(shí)例類型
源碼：
// node_modules/typescript/lib/lib.es5.d.ts
type InstanceType any> = T extends new (...args: any[]) => infer R ? R : any;
解釋：
使用 infer 和 extends 條件判斷完成
示例：
class C {
x = 0;
y = 0;
}
type T20 = InstanceType; // C
type T21 = InstanceType; // any
type T22 = InstanceType; // any
type T23 = InstanceType; // Error
type T24 = InstanceType; // Error
這樣的話，就可以指定 obj 里的所有方法里的上下文對(duì)象改成 Person 這個(gè)類型了
4.3、NonNullable(官方)
作用：這個(gè)類型可以用來過濾類型中的 null 及 undefined 類型。
源碼：
// node_modules/typescript/lib/lib.es5.d.ts
type NonNullable = T extends null | undefined ? never : T;
解釋：
使用 extends 條件判斷完成
示例：
type T22 = string | number | null;
type T23 = NonNullable; // -> string | number;
4.4、Parameters(官方)
作用：該類型可以獲得函數(shù)的參數(shù)類型組成的元組類型。
源碼：
// node_modules/typescript/lib/lib.es5.d.ts
type Parameters any> = T extends (...args: infer P) => any ? P : never;
解釋：
使用 infer 和 extends 條件判斷完成
示例：
function foo(x: number): Array {
return [x];
}
type P = Parameters; // -> [number]
此時(shí) P 的真實(shí)類型就是 foo 的參數(shù)組成的元組類型 [number]
4.5、ConstructorParameters(官方)
作用：獲得類的參數(shù)類型組成的元組類型。
源碼：
// node_modules/typescript/lib/lib.es5.d.ts
type ConstructorParameters any> = T extends new (...args: infer P) => any ? P : never;
解釋：
使用 infer 和 extends 條件判斷完成
示例：
class Person {
private firstName: string;
private lastName: string;
constructor(firstName: string, lastName: string) {
this.firstName = firstName;
this.lastName = lastName;
}
}
type P = ConstructorParameters; // -> [string, string]
此時(shí) P 就是 Person 中 constructor 的參數(shù) firstName 和 lastName 的類型所組成的元組類型 [string, string]。
下面的是我的公眾號(hào)二維碼圖片，歡迎關(guān)注。
