介紹
infer
最早出現在此 PR 中,表示在 extends
條件語句中待推斷的類型變量。
簡單示例如下:
type ParamType<T> = T extends (param: infer P) => any ? P : T;
在這個條件語句 T extends (param: infer P) => any ? P : T
中,infer P
表示待推斷的函數參數。
整句表示爲:如果 T
能賦值給 (param: infer P) => any
,則結果是 (param: infer P) => any
類型中的參數 P
,否則返回爲 T
。
interface User {
name: string;
age: number;
}
type Func = (user: User) => void
type Param = ParamType<Func>; // Param = User
type AA = ParamType<string>; // string
內置類型
在 2.8 版本中,TypeScript 內置了一些與 infer
有關的映射類型:
-
用於提取函數類型的返回值類型:
type ReturnType<T> = T extends (...args: any[]) => infer P ? P : any;
相比於文章開始給出的示例,
ReturnType<T>
只是將infer P
從參數位置移動到返回值位置,因此此時P
即是表示待推斷的返回值類型。type Func = () => User; type Test = ReturnType<Func>; // Test = User
-
用於提取構造函數中參數(實例)類型:
一個構造函數可以使用
new
來實例化,因此它的類型通常表示如下:type Constructor = new (...args: any[]) => any;
當
infer
用於構造函數類型中,可用於參數位置new (...args: infer P) => any;
和返回值位置new (...args: any[]) => infer P;
。因此就內置如下兩個映射類型:
// 獲取參數類型 type ConstructorParameters<T extends new (...args: any[]) => any> = T extends new (...args: infer P) => any ? P : never; // 獲取實例類型 type InstanceType<T extends new (...args: any[]) => any> = T extends new (...args: any[]) => infer R ? R : any; class TestClass { constructor( public name: string, public string: number ) {} } type Params = ConstructorParameters<typeof TestClass>; // [string, numbder] type Instance = InstanceType<typeof TestClass>; // TestClass
一些用例
至此,相信你已經對 infer
已有基本瞭解,我們來看看一些使用它的「騷操作」:
-
tuple 轉 union ,如:
[string, number]
->string | number
解答之前,我們需要了解 tuple 類型在一定條件下,是可以賦值給數組類型:
type TTuple = [string, number]; type TArray = Array<string | number>; type Res = TTuple extends TArray ? true : false; // true type ResO = TArray extends TTuple ? true : false; // false
因此,在配合
infer
時,這很容做到:type ElementOf<T> = T extends Array<infer E> ? E : never type TTuple = [string, number]; type ToUnion = ElementOf<ATuple>; // string | number
在 stackoverflow 上看到另一種解法,比較簡(牛)單(逼):
type TTuple = [string, number]; type Res = TTuple[number]; // string | number
-
union 轉 intersection,如:
string | number
->string & number
這個可能要稍微麻煩一點,需要
infer
配合「 Distributive conditional types 」使用。在相關鏈接中,我們可以瞭解到「Distributive conditional types」是由「naked type parameter」構成的條件類型。而「naked type parameter」表示沒有被
Wrapped
的類型(如:Array<T>
、[T]
、Promise<T>
等都是不是「naked type parameter」)。「Distributive conditional types」主要用於拆分extends
左邊部分的聯合類型,舉個例子:在條件類型T extends U ? X : Y
中,當T
是A | B
時,會拆分成A extends U ? X : Y | B extends U ? X : Y
;有了這個前提,再利用在逆變位置上,同一類型變量的多個候選類型將會被推斷爲交叉類型的特性,即
type Bar<T> = T extends { a: (x: infer U) => void, b: (x: infer U) => void } ? U : never; type T20 = Bar<{ a: (x: string) => void, b: (x: string) => void }>; // string type T21 = Bar<{ a: (x: string) => void, b: (x: number) => void }>; // string & number
因此,綜合以上幾點,我們可以得到在 stackoverflow 上的一個答案:
type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends ((k: infer I) => void) ? I : never; type Result = UnionToIntersection<string | number>; // string & number
當傳入
string | number
時:- 第一步:
(U extends any ? (k: U) => void : never)
會把 union 拆分成(string extends any ? (k: string) => void : never) | (number extends any ? (k: number)=> void : never)
,即是得到(k: string) => void | (k: number) => void
; - 第二步:
(k: string) => void | (k: number) => void extends ((k: infer I)) => void ? I : never
,根據上文,可以推斷出I
爲string & number
。
- 第一步:
當然,你可以玩出更多花樣,比如 union 轉 tuple。
LeetCode 的一道 TypeScript 面試題
前段時間,在 GitHub 上,發現一道來自 LeetCode TypeScript 的面試題,比較有意思,題目的大致意思是:
假設有一個這樣的類型(原題中給出的是類,這裏簡化爲 interface):
interface Module {
count: number;
message: string;
asyncMethod<T, U>(input: Promise<T>): Promise<Action<U>>;
syncMethod<T, U>(action: Action<T>): Action<U>;
}
在經過 Connect
函數之後,返回值類型爲
type Result {
asyncMethod<T, U>(input: T): Action<U>;
syncMethod<T, U>(action: T): Action<U>;
}
其中 Action<T>
的定義爲:
interface Action<T> {
payload?: T
type: string
}
這裏主要考察兩點
- 挑選出函數
- 此篇文章所提及的
infer
挑選函數的方法,已經在 handbook 中已經給出,只需判斷 value 能賦值給 Function 就行了:
type FuncName<T> = {
[P in keyof T]: T[P] extends Function ? P : never;
}[keyof T];
type Connect = (module: Module) => { [T in FuncName<Module>]: Module[T] }
/*
* type Connect = (module: Module) => {
* asyncMethod: <T, U>(input: Promise<T>) => Promise<Action<U>>;
* syncMethod: <T, U>(action: Action<T>) => Action<U>;
* }
*/
接下來就比較簡單了,主要是利用條件類型 + infer
,如果函數可以賦值給 asyncMethod<T, U>(input: Promise<T>): Promise<Action<U>>
,則取值爲 asyncMethod<T, U>(input: T): Action<U>
。具體答案就不給出了,感興趣的小夥伴可以嘗試一下。
更多
參考
更多文章,請關注我們的公衆號: