[TOC] >[success] # 泛型（Generics） 第二部分 - 約束泛型 上一章我們介紹了 **泛型** 出現的動機，要解決什么問題，和 **泛型** 的一個 **簡單的用法** ，可以把它看成是一個 **占位符** ，在 **使用時** 才動態的填入 **確定類型值** ，本章將探討 **泛型** 更深入的用法。 <br> 我們來談談 **約束泛型** ，為什么會有這個概念呢？來舉個例子，我們下面新建一個 **echowichArr 函數** ，給添加一個 **arg參數** ，然后添加上 **泛型** ，代碼如下： **index.ts** ~~~ function echowichArr<T>(arg: T): T { console.log(arg.length) return arg } ~~~ **編輯器圖片**：  這時會發現編輯器拋出了一個錯誤，因為在 **函數內部使用泛型變量** 時，由于 **事先不知道它是哪種類型，所以不能隨意的來操作它的屬性或方法** ，這里就報一個錯誤，意思是：**泛型T 不一定包含屬性 length** ，我們可以給這個函數 **傳入任意類型數據 ，當然有些數據不包括 length屬性** ，所以編譯時就報錯了，那么我們給這個 **函數** 傳入個 **數組** 作為 **參數**，這樣就有 **length屬性** 了，代碼如下： **index.ts** ~~~ function echowichArr<T>(arg: T[]): T[] { console.log(arg.length) return arg } const arrs = echowichArr([1,2,3]) ~~~ **編輯器圖片**：  可以看到 **arrs** 可以正確的返回 **number數組** ，但是這個解決方案不是完美的， **我們只能傳入數組** ，可能 **對象** 中有我們自己定義的屬性，起名為 **length** ，再或者 **string** 類型數據也是有 **length** 屬性的，我們傳入 **string** 類型數據就會報錯，代碼如下： **index.ts** ~~~ function echowichArr<T>(arg: T[]): T[] { console.log(arg.length) return arg } const arrs = echowichArr('str') ~~~ **編輯器圖片**：  此時編輯器拋出了一個錯誤，意思是 **str 不能賦值給一個 array 類型** ，所以我們需要一個新的解決方案， **我們可以對泛型進行一個約束，只允許這個函數傳入包含 length 屬性的變量，這就是約束泛型** >[success] ## 約束泛型 總結： 在 **泛型** 中使用 **extends** 關鍵字，就 **可以讓傳入值滿足我們特點的約束條件，而不是想傳入啥就傳入啥**。 首先我們創建一個 **接口（interFace）** ，來 **約束傳入的數據的類型** ，代碼如下： **index.ts** ~~~ // 定義接口（用來約束數據類型） interface IWithLength { length: number } // 約束傳入的泛型 function echowichLength<T extends IWithLength>(arg: T): T { console.log(arg.length) return arg } // 傳入 string 類型數據 const str = echowichLength('str') // 傳入 object 類型數據，并且屬性名稱定義未length const obj = echowichLength({ length: 10, width: 10 }) // 可以有更多的屬性，但是必須要包括 length // 傳入 array 類型數據 const arr = echowichLength([1, 2, 3]) // 錯誤示例 echowichLength(123) ~~~ **編輯器圖片**：  這里是提示 **123** 里沒有 **length屬性** 。