TypeScript infer 關(guān)鍵字

本節(jié)要介紹的 infer 關(guān)鍵字有些難理解，我們來(lái)通過(guò)一個(gè)類比來(lái)幫助理解。

語(yǔ)句 let num 中，通過(guò) let 來(lái)聲明了一個(gè)變量，那怎樣聲明一個(gè)不確定的類型變量呢？ 答案是使用 infer 關(guān)鍵字，infer R 就是聲明了一個(gè)類型變量 R。

1. 慕課解釋

在條件類型表達(dá)式中，可以在 extends 條件語(yǔ)句中使用 infer 關(guān)鍵字來(lái)聲明一個(gè)待推斷的類型變量。

2. 通過(guò) ReturnType 理解 infer

infer 相對(duì)比較難理解，我們先看下 TypeScript 一個(gè)內(nèi)置工具類型 ReturnType 。

• ReturnType<T> – 獲取函數(shù)返回值類型。

const add = (x:number, y:number) => x + y
type t = ReturnType<typeof add> // type t = number

代碼解釋：

通過(guò) ReturnType 可以得到函數(shù) add() 的返回值類型為 number 類型。但要注意不要濫用這個(gè)工具類型，應(yīng)盡量多的手動(dòng)標(biāo)注函數(shù)返回值類型。

來(lái)看一下 ReturnType 的實(shí)現(xiàn)源碼：

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

infer 的作用是讓 TypeScript 自己推斷，并將推斷的結(jié)果存儲(chǔ)到一個(gè)類型變量中，infer 只能用于 extends 語(yǔ)句中。

再來(lái)看 ReturnType 的實(shí)現(xiàn)：如果 T 滿足約束條件 (...args: any) => any，并且能夠賦值給 (...args: any) => infer R，則返回類型為 R，否則為 any 類型。

繼續(xù)看幾個(gè)例子：

type T0 = ReturnType<() => string>        // string
type T1 = ReturnType<(s: string) => void> // void
type T2 = ReturnType<<T>() => T>          // unknown

代碼解釋：

分別可以得到 type T0 = string type T1 = void type T2 = unknown，只要滿足約束條件 (...args: any) => any，TypeScript 推斷出函數(shù)的返回值，并借助 infer 關(guān)鍵字將其儲(chǔ)存在類型變量 R 中，那么最終得到返回類型 R。

3. 借助 infer 實(shí)現(xiàn)元組轉(zhuǎn)聯(lián)合類型

借助 infer 可以實(shí)現(xiàn)元組轉(zhuǎn)聯(lián)合類型，如：[string, number] -> string | number

type Flatten<T> = T extends Array<infer U> ? U : never

type T0 = [string, number]
type T1 = Flatten<T0> // string | number

代碼解釋：

第 1 行，如果泛型參數(shù) T 滿足約束條件 Array<infer U>，那么就返回這個(gè)類型變量 U。

第 3 行，元組類型在一定條件下，是可以賦值給數(shù)組類型，滿足條件:

type TypeTuple = [string, number] 
type TypeArray = Array<string | number>

type B0 = TypeTuple extends TypeArray ? true : false // true

第 4 行，就可以得到 type T1 = string | number。

4. 小結(jié)

infer 理解起來(lái)比較抽象，一定要親手寫(xiě)一下本節(jié)中的例子。借助條件類型的 infer 關(guān)鍵字來(lái)推斷類型，可以實(shí)現(xiàn)一些比如聯(lián)合類型轉(zhuǎn)交叉類型、聯(lián)合類型轉(zhuǎn)元組的操作，有興趣的可以了解一下。