TypeScript新語(yǔ)法之infer?extends怎么使用

這篇文章主要講解了“TypeScript新語(yǔ)法之infer extends怎么使用”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“TypeScript新語(yǔ)法之infer extends怎么使用”吧！

正文

我們知道，TypeScript 支持 infer 來(lái)提取類型的一部分，通過(guò)模式匹配的方式。

模式匹配

比如元組類型提取最后一個(gè)元素的類型：

type Last<Arr extends unknown[]> = 
    Arr extends [...infer rest,infer Ele]
        ? Ele 
        : never;

比如函數(shù)提取返回值類型：

type GetReturnType<Func extends Function> = 
    Func extends (...args: any[]) => infer ReturnType 
        ? ReturnType 
        : never;

比如字符串提取一部分，然后替換：

type ReplaceStr<
    Str extends string,
    From extends string,
    To extends string
> = Str extends `${infer Prefix}${From}${infer Suffix}` 
        ? `${Prefix}${To}${Suffix}` : Str;

模式匹配就是通過(guò)一個(gè)類型匹配一個(gè)模式類型，需要提取的部分通過(guò) infer 聲明一個(gè)局部變量，這樣就能從局部變量里拿到提取的類型。

infer 的模式匹配用法還是挺好理解的。

但是 infer 有一個(gè)問(wèn)題，比如這樣：

從 string 數(shù)組中提取的元素，默認(rèn)會(huì)推導(dǎo)為 unknown 類型，這就導(dǎo)致了不能直接把它當(dāng) string 用：

那怎么辦呢？

之前的處理方式是這樣的：

加一層判斷，這樣 Last 就推導(dǎo)為 string 類型了。

或者也可以和 string 取交叉類型：

這樣也可以作為 string 來(lái)用。

但是我們明明知道這里就是 string，卻還需要 & string 或者 xxx extends string 來(lái)轉(zhuǎn)換一次，這也太麻煩了。

TS 也知道有這個(gè)問(wèn)題，所以在 4.7 就引入了新語(yǔ)法：infer extends。

現(xiàn)在我們可以這樣寫：

infer 的時(shí)候加上 extends 來(lái)約束推導(dǎo)的類型，這樣推導(dǎo)出的就不再是 unknown 了，而是約束的類型。

試一下

這個(gè)語(yǔ)法是 TS 4.7 引入的，在 4.8 又完善了一下。

比如這樣一個(gè)類型：

type NumInfer<Str> = 
    Str extends `${infer Num extends number}`
        ? Num
        : never;

在 4.7 的時(shí)候推導(dǎo)結(jié)果是這樣：

而 4.8 就是這樣了：

也就是說(shuō) 4.7 的時(shí)候推導(dǎo)出的就是 extends 約束的類型，但是 4.8 的時(shí)候，如果是基礎(chǔ)類型，會(huì)推導(dǎo)出字面量類型。

有了這個(gè)語(yǔ)法之后，除了能簡(jiǎn)化類型編程的邏輯之外，也能實(shí)現(xiàn)一些之前實(shí)現(xiàn)不了的功能：

提取枚舉的值的類型

enum Code {
    a = 111,
    b = 222,
    c = "abc"
}

我們都是這樣寫：

但是有的值明明是數(shù)字，卻被作為了字符串，所以要再處理一下，轉(zhuǎn)換成數(shù)字類型，這時(shí)候就可以用 infer extends 了：

type StrToNum<Str> =
  Str extends `${infer Num extends number}`
    ? Num
    : Str

做完 string 到 number 的轉(zhuǎn)換，就拿到了我們想要的結(jié)果：

這就是 infer extends 的第二個(gè)作用。

處理 string 轉(zhuǎn) number 之外，也可以轉(zhuǎn) boolean、null 等類型：

試一下

總結(jié)

Typescript 支持 infer 類型，可以通過(guò)模式匹配的方式，提取一部分類型返回。

但是 infer 提取出的類型是 unknown，后面用的時(shí)候需要類似和 string 取交叉類型，或者 xxx extends string 這樣的方式來(lái)轉(zhuǎn)換成別的類型來(lái)用。這樣比較麻煩。

所以 TS 4.7 實(shí)現(xiàn)了 infer extends 的語(yǔ)法，可以指定推導(dǎo)出的類型，這樣簡(jiǎn)化了類型編程。

而且，infer extends 還可以用來(lái)做類型轉(zhuǎn)換，比如 string 轉(zhuǎn) number、轉(zhuǎn) boolean 等。

要注意的是，4.7 的時(shí)候，推導(dǎo)出的只是 extends 約束的類型，比如 number、boolean，但是 4.8 就能推導(dǎo)出字面量類型了，比如 1、2、true、false 這種。

有了 infer extends，不但能簡(jiǎn)化類型編程，還能實(shí)現(xiàn)一些之前很難實(shí)現(xiàn)的類型轉(zhuǎn)換，是很有用的一個(gè)新語(yǔ)法。

感謝各位的閱讀，以上就是“TypeScript新語(yǔ)法之infer extends怎么使用”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)TypeScript新語(yǔ)法之infer extends怎么使用這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！