泛型簡介

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

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

舉個(gè)??

舉個(gè)最簡單的例子來理解泛型??

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

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

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

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

舉個(gè)????

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

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

添加一點(diǎn)測試代碼：

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

我對于泛型的理解就是：

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

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

我們在上面說到，泛型可以看成是一個(gè)形參。在 JavaScript 中形參可以設(shè)置一個(gè)默認(rèn)值，那么在 TypeScript 中的泛型參數(shù)同樣可以設(shè)置一個(gè)默認(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ù)制到編輯器中會報(bào)錯(cuò)。這里我們嘗試補(bǔ)充一下，如下：

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

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

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

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

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

好了，現(xiàn)在我們來一些測試函數(shù)來驗(yàn)證一下以上重載函數(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)€(gè)數(shù)及入?yún)㈩愋?，所推斷的函?shù)返回值是跟上面的重載聲明一一對應(yīng)的，這就是 TypeScript 中最基礎(chǔ)的函數(shù)重載的理解?？吹竭@里，相信有很多人會有疑問，一個(gè)函數(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
  }
}

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

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

這里的核心理解要點(diǎn)就是：這里的 T extends HTMLElement = HTMLDivElement, U = T[] 是默認(rèn)值，只有沒傳參的時(shí)候會生效，如果傳參了會被具體的入?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)文章希望大家以后多多支持腳本之家！

最新評論