TypeScript類型編程中的extends和infer示例解析

更新時間：2023年08月04日 10:54:11 作者：Qing

這篇文章主要為大家介紹了TypeScript類型編程中的extends和infer示例解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪

引文

在剛接觸TypeScript的時候，使用最多的就是type和interface這兩個關鍵字，用來聲明類型，其實這樣也基本滿足日常需求。但是如果需要設計一些高級類型的話，那么僅僅用原來所掌握的TypeScript知識是無法滿足需求的。

設計高級類型的話涉及到類型編程的知識點，而類型編程中有兩個關鍵字非常重要，分別是extends和infer。

extends用來約束入參的類型以及進行條件判斷，infer用來聲明局部的類型變量。

extends

條件判斷

我們舉個簡單的例子來說明

type isOne<T extends number> = T extends 1 ? true : false

我們單獨看T extends 1 ? true : false這部分，這里和JavaScript中的三元表達式并無二致，但是有些同學不清楚其中extends表示的是什么含義。

T extends 1 ? true : false表示的含義其實就是傳入的T類型是否能夠賦值給字面量1這個類型，如果可以的話，就返回true，否則返回false

約束參數類型

繼續(xù)使用上面的例子，我們單獨看T extends number，這里extends的意思就是限制傳入的T類型必須是number類型，否則報錯。

為什么需要有這個限制？

因為我們是要判斷類型T是否能夠賦值給字面量類型1，但是如果傳入的參數都不是number類型，那么就沒必要做后續(xù)的條件判斷了。

約束infer推導的局部變量類型

type GetFirst<T extends string[]> = T extends [infer FirstChar, ...infer Rest]
  ? `${FirstChar}`
  : never;
type Res = GetFirst<['1', '2', '3']>;

來看看報錯信息，我們傳入的參數類型限制為sting類型的數組，但是infer推導出來的類型實際上是unknown類型，所以導致類型不匹配。

解決辦法有三種：

對FirstChar使用extends先做過濾

type GetFirst<T extends string[]> = T extends [infer FirstChar, ...infer Rest]
? FirstChar extends string
  ? `${FirstChar}`
  : never
: never;

FirstChar和string進行交叉運算

type GetFirst<T extends string[]> = T extends [infer FirstChar, ...infer Rest]
? `${FirstChar & string}`
: never;

使用infer extends做類型轉換

type GetFirst<T extends string[]> = T extends [
infer FirstChar extends string,
...infer Rest
]
? `${FirstChar}`
: never;

infer extends是在ts 4.7版本支持，低于這個版本無法使用。

類型轉換

type StrToNum<T extends string> = T extends `${infer Num extends number}` ? Num : T
type Res = StrToNum<"1">
// ts 4.7時，返回的結果是type Res = number
// ts 4.8及以上， 返回的結果是type Res = 1

infer

還是拿例子來進行講解，下面的例子是要提取Promise包裹的類型。

type PromiseValue<T extends Promise<unknown>> = T extends Promise<infer Value> ? Value : never
type Res = PromiseValue<Promise<string>> // string

畫個簡單的圖來描述下如何提取變量類型。

注意：infer聲明的局部變量，只能在條件語句為true的分支里面使用。

如果在false分之里面使用通過infer聲明的局部變量，編譯器會直接報錯表示找不到這個變量。

組合使用

ReturnType

內置工具類型RetureType用于獲取函數的返回值類型。

type MyReturnType<T extends (...args: any) => any> 
    = T extends (...args: any) => infer R 
        ? R 
        : any;
type Res = MyReturnType<() => string> // type Res = string

Parameters

內置工具類型Parameters用于獲取函數的參數類型。

type MyParameters<T extends (...args: any) => any> 
    = T extends (...args: infer P) => any 
        ? P 
        : never;
type Res = MyParameters<(a: string, b: number) => void>  // type Res = [a: string, b: number]

以上就是TypeScript類型編程中的extends和infer示例解析的詳細內容，更多關于TypeScript類型編程extends infer的資料請關注腳本之家其它相關文章！

您可能感興趣的文章: