TypeScript泛型學習

最近在跟著黃軼老師學習vue3.0框架的原始碼，遇到了難啃的點就是typescript的泛型反向推論。所以停下腳步找找資料加強學習typescript的泛型模組。

首先簡單建立第乙個使用泛型的例子：test函式，這個函式會返回任何傳入它的值。

// 不用泛型的情況function test(arg: number): number // 用泛型的情況function test(arg: t): t

t是一種特殊的變數，只用於表示型別而不是值，即型別變數。

定義了泛型函式後，可以用兩種方法使用。

// 第一種傳入所有的引數，包含型別引數let output = test('mystring')// 第二種使用普遍，利用了型別推論 -- 即編譯器會根據傳入的引數自動地幫助我們確定 t 的型別let output = test('mystring')

我們有時候想操作某型別的一組值，並且我們知道這組值具有什麼樣的屬性。在下面的例子中，我們想訪問 arg 的 length 屬性，但是編譯器並不能證明每種型別都有 length 屬性，所以就報錯了。

function test(arg: t): t

想要不報錯，需要用到length屬性，可以定義乙個介面來描述約束條件，建立乙個包含.length屬性的介面，使用這個介面和extends關鍵字來實現約束：

inte***ce lengthprop function test(arg: t): t

現在這個test泛型函式被定義了約束，因此它不再是適用於任意型別：

test(3);  // errortest() // ok

在泛型約束中使用型別引數你可以宣告乙個型別引數，且它被另乙個型別引數所約束。比如，現在我們想要用屬性名從物件裡獲取這個屬性。並且我們想要確保這個屬性存在於物件 obj 上，因此我們需要在這兩個型別之間使用約束。

function getproperty(obj: t, key: k ) let x = 
getproperty(x, 'a') // okaygetproperty(x, 'm') // error

小結

對於ts依舊停留在學習的路上，沒有在工作中專案上使用。個人覺得除非是工具庫或者框架或大型專案才需要typescript的加持，不然我們就要衡量使用後的成本效率比了。當然這也是個人觀點了，雖然我工作上還沒用到，但也要去熟悉如何使用，密切關注日新月異前端動向。