TypeScript新語法之infer extends範例詳解

2022-08-19 22:02:16

正文

我們知道，TypeScript 支援 infer 來提取型別的一部分，通過模式匹配的方式。

模式匹配

比如元組型別提取最後一個元素的型別：

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

比如函數提取返回值型別：

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;

模式匹配就是通過一個型別匹配一個模式型別，需要提取的部分通過 infer 宣告一個區域性變數，這樣就能從區域性變數裡拿到提取的型別。

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

但是 infer 有一個問題，比如這樣：

從 string 陣列中提取的元素，預設會推導為 unknown 型別，這就導致了不能直接把它當 string 用：

那怎麼辦呢？

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

加一層判斷，這樣 Last 就推導為 string 型別了。

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

這樣也可以作為 string 來用。

但是我們明明知道這裡就是 string，卻還需要 & string 或者 xxx extends string 來轉換一次，這也太麻煩了。

TS 也知道有這個問題，所以在 4.7 就引入了新語法：infer extends。

現在我們可以這樣寫：

infer 的時候加上 extends 來約束推導的型別，這樣推匯出的就不再是 unknown 了，而是約束的型別。

試一下

這個語法是 TS 4.7 引入的，在 4.8 又完善了一下。

比如這樣一個型別：

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

在 4.7 的時候推導結果是這樣：

而 4.8 就是這樣了：

也就是說 4.7 的時候推匯出的就是 extends 約束的型別，但是 4.8 的時候，如果是基礎型別，會推匯出字面量型別。

有了這個語法之後，除了能簡化型別程式設計的邏輯之外，也能實現一些之前實現不了的功能：

提取列舉的值的型別

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

我們都是這樣寫：

但是有的值明明是數位，卻被作為了字串，所以要再處理一下，轉換成數位型別，這時候就可以用 infer extends 了：

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

做完 string 到 number 的轉換，就拿到了我們想要的結果：

這就是 infer extends 的第二個作用。

處理 string 轉 number 之外，也可以轉 boolean、null 等型別：

試一下

總結

Typescript 支援 infer 型別，可以通過模式匹配的方式，提取一部分型別返回。

但是 infer 提取出的型別是 unknown，後面用的時候需要類似和 string 取交叉型別，或者 xxx extends string 這樣的方式來轉換成別的型別來用。這樣比較麻煩。

所以 TS 4.7 實現了 infer extends 的語法，可以指定推匯出的型別，這樣簡化了型別程式設計。

而且，infer extends 還可以用來做型別轉換，比如 string 轉 number、轉 boolean 等。

要注意的是，4.7 的時候，推匯出的只是 extends 約束的型別，比如 number、boolean，但是 4.8 就能推匯出字面量型別了，比如 1、2、true、false 這種。

有了 infer extends，不但能簡化型別程式設計，還能實現一些之前很難實現的型別轉換，是很有用的一個新語法。

以上就是TypeScript新語法之infer extends範例詳解的詳細內容，更多關於TypeScript語法infer extends的資料請關注it145.com其它相關文章！

TypeScript新語法之infer extends範例詳解

目錄

正文

模式匹配

提取列舉的值的型別

總結

熱門文章