TS進階之infer

前一篇文章我們有介紹條件類型,這篇文章我們來介紹下非常實用的infer的使用方法。

使用介紹

我們上篇文章中介紹了條件類型的基本語法是:

 T extends U ? X : Y;

如果占位符類型U是一個可以被分解成幾個部分的類型,譬如數組類型,元組類型,函數類型,字符串字面量類型等。這時候可以通過infer來獲取U類型中某個部分的類型。

infer語法的限制如下:

  1. infer只能在條件類型的 extends 子句中使用
  2. infer得到的類型只能在true語句中使用, 即X中使用

推斷數組(或者元組)的類型

使用方法
type InferArray<T> = T extends (infer U)[] ? U : never;

(infer U)和平時常寫的string[]number[]等等是不是很像?這里就是通過(infer U)來獲取數組對應的類型。

案例
type I0 = InferArray<[number, string]>; // string | number
type I1 = InferArray<string[]>; // string
type I2 = InferArray<number[]>; // number

推斷數組(或者元組)第一個元素的類型

使用方法
type InferFirst<T extends unknown[]> = T extends [infer P, ...infer _] ? P : never

[infer P, ... infer _]infer P獲取的是第一個元素的類型,而...infer _獲取的是數組其他剩余元素的數組類型;
特別說明下,我們例子匯總不需要使用其他元素的類型,所以用_

案例
type I3 = InferFirst<[3, 2, 1]>; // 3

推斷數組(或者元組)最后一個元素的類型

使用方法
type InferLast<T extends unknown[]> = T extends [... infer _, infer Last] ? Last : never;

這個和推斷數組第一個元素的類型類似,...infer _獲取的是最后一個元素之前的所有元素類型,infer Last獲取的是最后一個元素的類型。

案例
type I4 = InferLast<[3, 2, 1]>; // 1

推斷函數類型的參數

使用方法
type InferParameters<T extends Function> = T extends (...args: infer R) => any ? R : never;

...args 代表的是函數參數組成的元組, infer R代表的就是推斷出來的這個函數參數組成的元組的類型。

案例
type I5 = InferParameters<((arg1: string, arg2: number) => void)>; // [string, number]

推斷函數類型的返回值

使用方法
type InferReturnType<T extends Function> = T extends (...args: any) => infer R ? R : never;

和前面的推斷函數類型的參數類似,=> 后面的infer R代表的就是推斷出來的函數的返回值類型。

案例
type I6 = InferReturnType<() => string>; // string

推斷Promise成功值的類型

使用方法
type InferPromise<T> =  T extends Promise<infer U> ? U : never;

案例
type I7 = InferPromise<Promise<string>>; // string

推斷字符串字面量類型的第一個字符對應的字面量類型

使用方法
type InferString<T extends string> = T extends `${infer First}${infer _}` ? First : [];
案例
type I8 = InferString<"Johnny">; // J

綜合案例

接下來我舉一些綜合性的例子,我不介紹這些例子實現的功能,大家來感受下infer的使用技巧,看看是否能一眼看出來實現的功能:

type Shift<T> = T extends [infer L, ...infer R]? [...R] : [];
type Pop<T extends any[]> = T extends [...infer L, infer R] ? [...L] : [];
type Reverse<T extends unknown[], U extends unknown[] = []> = [] extends T
  ? U
  : T extends [infer L, ...infer R]
  ? Reverse<R, [L, ...U]>
  : U;
type FlipArguments<T extends Function> = T extends (...arg: infer R) => infer S ? (...arg : Reverse<[...R]>) => S : T;
type StartsWith<T extends string, U extends string> = T extends `${U}${infer R}` ? true : false;
type TrimLeft<S extends string> = S extends `${infer L}${infer R}`
  ? L extends ' ' | '\n' | '\t'
    ? TrimLeft<R>
    : S
  : '';
type Trim<S extends string> = S extends `${' ' | '\t' | '\n'}${infer R}`
  ? Trim<R>
  : S extends `${infer L}${' ' | '\t' | '\n'}`
  ? Trim<L>
  : S;
type StringToUnion<T extends string, U = never> = T extends ''
  ? U
  : T extends `${infer L}${infer R}`
  ? StringToUnion<R, U | L>
  : U;

這些例子中涉及到兩個沒有介紹的知識點:模版字面量類型遞歸類型,如果對這兩個知識點不太懂的可以參考其他文章。這兩個知識點我后面也會介紹。

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 228,443評論 6 532
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,530評論 3 416
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 176,407評論 0 375
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 62,981評論 1 312
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,759評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,204評論 1 324
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,263評論 3 441
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,415評論 0 288
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 48,955評論 1 336
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,782評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,983評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,528評論 5 359
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,222評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,650評論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,892評論 1 286
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,675評論 3 392
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 47,967評論 2 374

推薦閱讀更多精彩內容