泛型簡介

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

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

舉個??

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

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

上述代碼很簡單，約束 getVal 這個函數(shù)入?yún)?string 類型，約束它的返回值和它的入?yún)⒁粯?，也?string 類型。

如上所示，我們傳入數(shù)值 1 會報錯。傳入正確類型的參數(shù)后，通過上述圖像，可以看出 result2 可以調(diào)用字符串相關(guān)的屬性和方法，這是因為 IDE 已經(jīng)預(yù)先推斷出了 result2 的類型。

上面的例子是 TypeScript 最基本的應(yīng)用。此時，我們不妨做一個思考????，getVal 函數(shù)就只能接收 string 入?yún)?？我如果想要實現(xiàn)傳入任意類型的值，函數(shù)的返回值就是該任意類型怎么實現(xiàn)？

舉個????

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

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

添加一點測試代碼：

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

我對于泛型的理解就是：

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

泛型參數(shù)的默認(rèn)值——函數(shù)重載

我們在上面說到，泛型可以看成是一個形參。在 JavaScript 中形參可以設(shè)置一個默認(rèn)值，那么在 TypeScript 中的泛型參數(shù)同樣可以設(shè)置一個默認(rèn)值。我們來看一下官方的示例代碼??

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 類型聲明，并且函數(shù)只有類型聲明沒有的具體執(zhí)行代碼塊，直接復(fù)制到編輯器中會報錯。這里我們嘗試補充一下，如下：

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
  }
}

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

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

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

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

好了，現(xiàn)在我們來一些測試函數(shù)來驗證一下以上重載函數(shù)的類型推斷：

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[]>

根據(jù)圖例，可以看出根據(jù)不同的入?yún)€數(shù)及入?yún)㈩愋停茢嗟暮瘮?shù)返回值是跟上面的重載聲明一一對應(yīng)的，這就是 TypeScript 中最基礎(chǔ)的函數(shù)重載的理解?？吹竭@里，相信有很多人會有疑問，一個函數(shù)重載寫這么多行聲明，需要搞這么麻煩??，TS……勞資不學(xué)了????。

泛型參數(shù)的默認(rèn)值——正文

由于前面的那么多鋪墊，這篇文章的主題部分已經(jīng)可以一帶而過了~

有了泛型參數(shù)默認(rèn)類型，我們可以將上面復(fù)雜的重載聲明簡化為這樣??

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

沒錯，通過給泛型參數(shù)設(shè)置默認(rèn)值，我們只需要寫一個普通函數(shù)就行了，先看下代碼執(zhí)行效果：

我們給 T 設(shè)置了一個默認(rèn)類型 HTMLDivElement 。在解析 create() 語句時，由于沒有入?yún)ⅲ?code>T 的類型被賦為 HTMLDivElement，而 U = T[]，所以 U 的類型是 HTMLDivElement[] ，因此最后的返回值類型推斷為 Container<HTMLDivElement, HTMLDivElement[]> 。后續(xù)的 r2 和 r3 都是同理。

這里的核心理解要點就是：這里的 T extends HTMLElement = HTMLDivElement, U = T[] 是默認(rèn)值，只有沒傳參的時候會生效，如果傳參了會被具體的入?yún)㈩愋退鎿Q。

以上便是我對于 TypeScript 中泛型參數(shù)默認(rèn)值的一些粗淺理解，歡迎討論指正????。

參考

TypeScript 2.3——泛型參數(shù)默認(rèn)值

到此這篇關(guān)于對TypeScript泛型參數(shù)的默認(rèn)值理解的文章就介紹到這了,更多相關(guān)TS泛型參數(shù)默認(rèn)值內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！