TS進階之infer

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

使用介紹

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

 T extends U ? X : Y;

如果占位符類型U是一個可以被分解成幾個部分的類型逊桦,譬如數(shù)組類型谈喳,元組類型,函數(shù)類型钮孵,字符串字面量類型等骂倘。這時候可以通過infer來獲取U類型中某個部分的類型。

infer語法的限制如下:

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

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

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

(infer U)和平時常寫的string[]巴席,number[]等等是不是很像历涝?這里就是通過(infer U)來獲取數(shù)組對應(yīng)的類型。

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

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

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

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

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

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

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

這個和推斷數(shù)組第一個元素的類型類似电爹,...infer _獲取的是最后一個元素之前的所有元素類型,infer Last獲取的是最后一個元素的類型料睛。

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

推斷函數(shù)類型的參數(shù)

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

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

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

推斷函數(shù)類型的返回值

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

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

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

推斷Promise成功值的類型

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

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

推斷字符串字面量類型的第一個字符對應(yīng)的字面量類型

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

綜合案例

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

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;

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

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末瓤摧,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子玉吁,更是在濱河造成了極大的恐慌照弥,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,402評論 6 499
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件进副,死亡現(xiàn)場離奇詭異这揣,居然都是意外死亡,警方通過查閱死者的電腦和手機影斑,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,377評論 3 392
  • 文/潘曉璐 我一進店門给赞,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人矫户,你說我怎么就攤上這事片迅。” “怎么了吏垮?”我有些...
    開封第一講書人閱讀 162,483評論 0 353
  • 文/不壞的土叔 我叫張陵障涯,是天一觀的道長。 經(jīng)常有香客問我膳汪,道長唯蝶,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,165評論 1 292
  • 正文 為了忘掉前任遗嗽,我火速辦了婚禮粘我,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己征字,他們只是感情好都弹,可當(dāng)我...
    茶點故事閱讀 67,176評論 6 388
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著匙姜,像睡著了一般畅厢。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上氮昧,一...
    開封第一講書人閱讀 51,146評論 1 297
  • 那天框杜,我揣著相機與錄音,去河邊找鬼袖肥。 笑死咪辱,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的椎组。 我是一名探鬼主播油狂,決...
    沈念sama閱讀 40,032評論 3 417
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼寸癌!你這毒婦竟也來了专筷?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 38,896評論 0 274
  • 序言:老撾萬榮一對情侶失蹤蒸苇,失蹤者是張志新(化名)和其女友劉穎仁堪,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體填渠,經(jīng)...
    沈念sama閱讀 45,311評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡弦聂,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,536評論 2 332
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了氛什。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片莺葫。...
    茶點故事閱讀 39,696評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖枪眉,靈堂內(nèi)的尸體忽然破棺而出捺檬,到底是詐尸還是另有隱情,我是刑警寧澤贸铜,帶...
    沈念sama閱讀 35,413評論 5 343
  • 正文 年R本政府宣布堡纬,位于F島的核電站,受9級特大地震影響蒿秦,放射性物質(zhì)發(fā)生泄漏烤镐。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,008評論 3 325
  • 文/蒙蒙 一棍鳖、第九天 我趴在偏房一處隱蔽的房頂上張望炮叶。 院中可真熱鬧碗旅,春花似錦、人聲如沸镜悉。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,659評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽侣肄。三九已至旧困,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間稼锅,已是汗流浹背叮喳。 一陣腳步聲響...
    開封第一講書人閱讀 32,815評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留缰贝,地道東北人。 一個月前我還...
    沈念sama閱讀 47,698評論 2 368
  • 正文 我出身青樓畔濒,卻偏偏與公主長得像剩晴,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子侵状,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,592評論 2 353

推薦閱讀更多精彩內(nèi)容