TypeScript泛型參數(shù)的默認(rèn)值是什么

這篇文章主要介紹“TypeScript泛型參數(shù)的默認(rèn)值是什么”，在日常操作中，相信很多人在TypeScript泛型參數(shù)的默認(rèn)值是什么問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”TypeScript泛型參數(shù)的默認(rèn)值是什么”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

泛型簡介

軟件工程中，我們不僅要創(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)的屬性和方法，這是因?yàn)?IDE 已經(jīng)預(yù)先推斷出了 result2 的類型。

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

舉個

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

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

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

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

我對于泛型的理解就是：

我們程序員在看到 '123'、true 等變量時，我們一眼就能看出它是什么類型，計算機(jī)當(dāng)然也能夠識別出來。TypeScript 引擎通過解析 AST 的方式推斷出了 getVal 的入?yún)㈩愋蜑?string ，將推斷出來的類型用一個變量 T 存起來，這樣我們可以將 T 靈活的運(yùn)用在各種地方?？傊?，我們可以將泛型看成是一個變量或者是一個形參，只不過在 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ù)制到編輯器中會報錯。這里我們嘗試補(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
  }
}

以上代碼是一個重載函數(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ù)來驗(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)€數(shù)及入?yún)㈩愋?，所推斷的函?shù)返回值是跟上面的重載聲明一一對應(yīng)的，這就是 TypeScript 中最基礎(chǔ)的函數(shù)重載的理解?？吹竭@里，相信有很多人會有疑問，一個函數(shù)重載寫這么多行聲明，需要搞這么麻煩

泛型參數(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 都是同理。

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

到此，關(guān)于“TypeScript泛型參數(shù)的默認(rèn)值是什么”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！