概述

• 在TypeScript這一逐漸成為前端開發首選的靜態類型檢查語言中，類型系統提供了豐富的工具來幫助開發者編寫更加健壯和可維護的代碼。
• 其中，Extract<T, U>是一個強大的內置實用類型，用于從一個聯合類型T中提取出屬于另一個類型U的那些類型。
• 本文將深入探討Extract類型的工作原理、應用場景以及如何有效利用它來提升代碼的類型安全性和表達力。

什么是Extract<T, U>？

• Extract<T, U>是一個條件類型，其定義為：從類型T中選取那些同時也可以被類型U賦值的類型
• 簡而言之，它像一個過濾器，保留了T中與U兼容的部分
• 在TypeScript的類型系統中，兼容性意味著一個類型可以被另一個類型所賦值
• 例如，任何派生自基類的類型都可以賦值給基類類型

基本用法

type A = string | number | boolean;
type B = number | boolean;type C = Extract<A, B>; // 結果為: number | boolean

• 在這個例子中，Extract<A, B>的結果是A類型中與B兼容的類型，即number和boolean

應用場景

• 類型篩選：在處理復雜的聯合類型時，Extract可以幫助我們精煉出特定的類型，特別是在大型項目中處理API響應或狀態管理時，能夠有效地縮小類型范圍，提高代碼的可讀性和準確性

• 泛型約束：結合泛型使用，Extract可以創建更加靈活且精確的類型約束。例如，在定義一個函數時，可以約束參數類型必須是某聯合類型的一個子集，從而限制函數的適用范圍

• 類型映射：在實現類型映射或類型轉換時，Extract可以幫助我們基于類型兼容性進行有選擇的映射，特別是在處理多態或復雜類型系統設計時

實戰案例

1 ）從API響應中提取特定類型

• 假設你正在處理一個API響應，該響應可能包含多種類型的數據，但你只關心其中的某些類型

  type ApiResponse = { type: 'user'; data: User } | { type: 'post'; data: Post } | { type: 'comment'; data: Comment };type UserSpecificResponse = Extract<ApiResponse, { type: 'user' }>;
  

2 ) 泛型約束與類型映射

• 考慮一個函數，它應該只處理某些特定類型的對象集合

  // UserSpecificResponse 現在是 { type: 'user'; data: User }
  type Animal = { kind: 'dog' | 'cat' | 'bird' };
  type Canine = { kind: 'dog' };function processCaninesOnly<T>(items: Array<Extract<T, Canine>>): void {// ...
  }const dogs: Array<{ kind: 'dog' }> = [{ kind: 'dog' }, { kind: 'dog' }];
  processCaninesOnly(dogs); // 正確，因為dogs數組元素的kind只能是'dog'
  

總結

• Extract<T, U>類型是TypeScript中一個強大的工具，它通過條件類型實現了類型篩選，增強了類型系統的靈活性和表達力
• 在處理復雜類型邏輯、泛型約束以及類型映射時，Extract能夠幫助開發者更精細地控制類型系統，寫出更加健壯和易于維護的代碼
• 通過上述介紹和案例，希望你能夠掌握并充分利用Extract類型在實際項目中的應用，進一步提升你的TypeScript編碼體驗