TypeScript 是 JavaScript 的靜態型別超集，由於其能夠及早捕獲錯誤並提高程式碼可讀性，在技術社群中廣受歡迎。 TypeScript 的強大功能之一是 infer 關鍵字，它允許開發人員編寫更具表現力和動態的類型。

推斷關鍵字

TypeScript 2.8 中引入了 infer 關鍵字，用於在條件類型中建立臨時類型變數。然後，這些類型變數可用於推斷條件類型的 true 或 false 分支內的類型。 infer 關鍵字使開發人員能夠編寫更具動態性和表現力的類型，因為它允許 TypeScript 根據使用的上下文來確定特定類型。

為了更好地理解 infer 的工作原理，我們來看看條件類型的基本語法：

type MyConditionalType = T extends SomeType ? TrueType : FalseType;

在此範例中，T 是泛型型別參數，SomeType 表示與 T 進行比較的型別。如果 T 擴展 SomeType，則 MyConditionalType 的類型將為 TrueType。如果不是，則為 FalseType。

現在，讓我們將 infer 關鍵字引入其中：

type MyInferredType = T extends SomeType ? U : FalseType;

這裡，我們使用 infer 關鍵字在條件類型的 true 分支內建立一個臨時類型變數 U。如果 T 擴充 SomeType，TypeScript 將嘗試根據 T 的類型推斷 U 的類型。

範例

返回類型

ReturnType 是提取函數傳回類型的實用程式類型。這是如何使用 infer 關鍵字建立動態類型的完美範例。這是 ReturnType 的定義：

type ReturnType any> = T extends (...args: any[]) => infer R ? R : any;

在此定義中，T 是函數類型，它接受任意數量的參數並傳回任意類型。使用 infer 關鍵字，我們建立一個臨時類型變數 R 來表示函數的回傳類型。如果 T 是函數，TypeScript 會推斷傳回類型並將其指派給 R。

讓我們來看看 ReturnType 的實際應用：

function greet(name: string): string {
  return `Hello, ${name}!`;
}
​
type GreetReturnType = ReturnType; // GreetReturnType is inferred as 'string'

這裡，ReturnType用來推斷greet函數的回傳類型，即string。

參數

利用 infer 關鍵字的另一個有用的實用程式類型是參數。此類型將函數的參數類型提取為元組。參數定義如下：

type Parameters any> = T extends (...args: infer P) => any ? P : never;

在這個例子中，我們建立一個臨時型別變數P來表示函數的參數型別。如果 T 是函數，TypeScript 會推斷參數類型並將它們作為元組指派給 P。

讓我們來看一個使用參數的範例：

function add(a: number, b: number): number {
  return a   b;
}
​
type AddParameters = Parameters; // AddParameters is inferred as [number, number]

這裡，Parameters用來推斷add函數的參數類型，是一個元組[number, number]。

PromiseType

PromiseType 實用程式類型可用於擷取 Promise 解析為的型別。這在處理非同步函數時特別有用。 PromiseType 的定義如下：

type PromiseType> = T extends Promise ? U : never;

在此範例中，我們建立一個臨時類型變數 U 來表示 Promise 解析為的類型。如果 T 是 Promise，TypeScript 會推斷已解析的類型並將其指派給 U。下面是一個範例：

async function fetchData(): Promise {
  return "Fetched data";
}
​
type FetchedDataType = PromiseType>; // FetchedDataType is inferred as 'string'

在本例中，PromiseType 用於推斷 fetchData 函數的 Promise 解析的類型，即 string。

UnboxArray

UnboxArray 實用程式類型可用於擷取陣列中元素的類型。 UnboxArray 的定義如下：

type UnboxArray> = T extends Array ? U : never;

在此範例中，我們建立一個臨時類型變數 U 來表示陣列中元素的類型。如果 T 是一個數組，TypeScript 會推斷元素類型並將其指派給 U。例如：

type MyArray = number[];

type ElementType = UnboxArray; // ElementType is inferred as 'number'

這裡，UnboxArray用來推斷MyArray型態內元素的型別，即number。

限制

雖然 infer 關鍵字非常強大，但它有一些限制：

1. 只能在條件類型中使用。

2. TypeScript 並不總是能夠推斷出正確的類型，尤其是在處理複雜或遞歸類型時。在這種情況下，開發人員可能需要提供額外的類型註解或重構其類型以幫助 TypeScript 推斷正確的類型。

結論

透過理解和利用 infer 的力量，您可以建立更靈活的 TypeScript 專案。立即開始考慮將 infer 關鍵字合併到您的工具包中。

如果您覺得這有幫助，請考慮 訂閱我的時事通訊 以獲取更多有關 Web 開發的有用文章和工具。感謝您的閱讀！