關於對TypeScript泛型參數的默認值理解

Posted on by

泛型簡介

軟件工程中，我們不僅要創建一致的定義良好的 API，同時也要考慮可重用性。 組件不僅能夠支持當前的數據類型，同時也能支持未來的數據類型，這在創建大型系統時為你提供瞭十分靈活的功能。

在像C# 和 Java 這樣的語言中，可以使用 泛型 來創建可重用的組件，一個組件可以支持多種類型的數據。 這樣用戶就可以以自己的數據類型來使用組件。

舉個🌰

舉個最簡單的例子來理解泛型👇

function getVal(val: string): string {
  return val
}

上述代碼很簡單，約束 getVal 這個函數入參為 string 類型，約束它的返回值和它的入參一樣，也是 string 類型。

如上所示，我們傳入數值 1 會報錯。傳入正確類型的參數後，通過上述圖像，可以看出 result2 可以調用字符串相關的屬性和方法，這是因為 IDE 已經預先推斷出瞭 result2 的類型。

上面的例子是 TypeScript 最基本的應用。此時，我們不妨做一個思考🤔🤔，getVal 函數就隻能接收 string 入參嗎？我如果想要實現傳入任意類型的值，函數的返回值就是該任意類型怎麼實現？

舉個🌰🌰

完成上述提出的疑問可以使用泛型，代碼如下👇

function getVal<T>(val: T): T {
  return val
}

添加一點測試代碼：

這一次我們可以傳入任何類型的值都不會報錯，並且都能夠享受 IDE 預推斷帶來智能提示，這就是 TypeScript 的核心魅力——類型推斷和類型約束。

我對於泛型的理解就是：

我們程序員在看到 '123'、true 等變量時，我們一眼就能看出它是什麼類型，計算機當然也能夠識別出來。TypeScript 引擎通過解析 AST 的方式推斷出瞭 getVal 的入參類型為 string ，將推斷出來的類型用一個變量 T 存起來，這樣我們可以將 T 靈活的運用在各種地方。總之，我們可以將泛型看成是一個變量或者是一個形參，隻不過在 JavaScript 中變量存儲的是值，而 TypeScript 中存儲的是類型罷瞭。

泛型參數的默認值——函數重載

我們在上面說到，泛型可以看成是一個形參。在 JavaScript 中形參可以設置一個默認值，那麼在 TypeScript 中的泛型參數同樣可以設置一個默認值。我們來看一下官方的示例代碼👇

declare function create(): Container<HTMLDivElement, HTMLDivElement[]>;
declare function create<T extends HTMLElement>(element: T): Container<T, T[]>;
declare function create<T extends HTMLElement, U extends HTMLElement>(
  element: T,
  children: U[]
): Container<T, U[]>;

示例代碼中缺少 Container 類型聲明，並且函數隻有類型聲明沒有的具體執行代碼塊，直接復制到編輯器中會報錯。這裡我們嘗試補充一下，如下：

type Container<T, U> = {element: T, children: U}

function create(): Container<HTMLDivElement, HTMLDivElement[]>;
function create<T extends HTMLElement>(element: T): Container<T, T[]>;
function create<T extends HTMLElement, U extends HTMLElement>(element: T, children: U[]): Container<T, U[]>;
function create<T extends HTMLElement, U extends T[]>(element?: T, children?: U): Container<T, U> {
  return {
    element: element as T,
    children: children as U
  }
}

以上代碼是一個重載函數的聲明，函數重載允許一個函數接受不同數量或類型的參數時，作出不同的處理（PS：這裡的處理就是會有不同的類型推斷和約束）。

我們先一行一行的解析它的重載聲明含義👇

  • function create(): Container<HTMLDivElement, HTMLDivElement[]> 聲明一個 create 函數，無入參，返回值是一個包含 HTMLDivElement 類型的 Container 類型數據。
  • function create<T extends HTMLElement>(element: T): Container<T, T[]> 聲明一個 create 函數，接收一個被約束為 HTMLElement 類型的 element 參數（通過下圖可以看出，像這些DOM類型可以滿足 HTMLElement 類型約束），返回值是一個包含滿足 HTMLElement 類型的 Container 類型數據。

  • function create<T extends HTMLElement, U extends HTMLElement>(element: T, children: U[]): Container<T, U[]> 聲明一個 create 函數，接收被同樣約束為 HTMLElement 類型的 element 和 children 參數。

好瞭，現在我們來一些測試函數來驗證一下以上重載函數的類型推斷：

const r1 = create() // Container<HTMLDivElement, HTMLDivElement[]>
const r2 = create(document.createElement('dialog')) // Container<HTMLDialogElement, HTMLDialogElement[]>
const children = [document.createElement('div')] // HTMLDivElement[]
const r3 = create(document.createElement('dialog'), children) // Container<HTMLDialogElement, HTMLDivElement[]>

根據圖例，可以看出根據不同的入參個數及入參類型，所推斷的函數返回值是跟上面的重載聲明一一對應的，這就是 TypeScript 中最基礎的函數重載的理解。看到這裡，相信有很多人會有疑問，一個函數重載寫這麼多行聲明，需要搞這麼麻煩😰，TS……勞資不學瞭😡😡。

泛型參數的默認值——正文

由於前面的那麼多鋪墊，這篇文章的主題部分已經可以一帶而過瞭~

有瞭泛型參數默認類型，我們可以將上面復雜的重載聲明簡化為這樣👇

function create<T extends HTMLElement = HTMLDivElement, U = T[]>(element?: T, children?: U): Container<T, U> {
  return {
    element: element as T,
    children: children as U
  }
}

沒錯，通過給泛型參數設置默認值，我們隻需要寫一個普通函數就行瞭，先看下代碼執行效果：

我們給 T 設置瞭一個默認類型 HTMLDivElement 。在解析 create() 語句時，由於沒有入參，T 的類型被賦為 HTMLDivElement，而 U = T[]，所以 U 的類型是 HTMLDivElement[] ，因此最後的返回值類型推斷為 Container<HTMLDivElement, HTMLDivElement[]> 。後續的 r2 和 r3 都是同理。

這裡的核心理解要點就是：這裡的 T extends HTMLElement = HTMLDivElement, U = T[] 是默認值，隻有沒傳參的時候會生效，如果傳參瞭會被具體的入參類型所替換。

以上便是我對於 TypeScript 中泛型參數默認值的一些粗淺理解，歡迎討論指正😝😝。

參考

TypeScript 2.3——泛型參數默認值

到此這篇關於對TypeScript泛型參數的默認值理解的文章就介紹到這瞭,更多相關TS泛型參數默認值內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：