[TOC] >[success] # 類和接口 - 完美搭檔 之前學習過 **interface（接口）** ， 可以用于給 **對象的形狀進行描述** ，還可以 **對函數的類型進行描述** ，這節介紹 **interface（接口）** 的另一個用途，**對 Class（類） 的類型進行抽象** 。 **需求** ：在 **面向對象** 的世界中，一個 **Class（類）** 只能 **繼承自** 另外一個 **Class（類）** ，有時候不同的 **Class（類）** 之間，會有一些 **共同的特性** ，使用 **子類繼承父類** 的方法，很難來完成。 >[success] ## interface（接口）提取 Class（類）共同特性 這時我們可以 **把這些特性提取成接口** ，然后用一個 **implements 關鍵字** 來實現，這樣就大大提高了 **面向對象** 的靈活性，舉個例子，代碼如下： **index.ts** ~~~ // --------------------------- Class 類 --------------------------- // 汽車類 class Car { // 打開收音機方法 switchRadio(trigger: boolean){ } } // 手機類 class Cellphone { // 打開收音機方法 switchRadio(trigger: boolean){ } } ~~~ 上面的代碼中，我們有 **2** 個類， **Car（汽車）類** 與 **Cellphone（手機）類** ，它倆都有一個相同的 **打開收音機方法 switchRadio** ，所以我們考慮把它 **提取** 出來，這時候就比較難，**如果用父類的形式，Car 類與 Cellphone 類，必須要有一個合適的父類** ，但是很難找，這時候可以 **把它倆相同的特性抽取成 interface（接口），讓這 2 個類都去實現它** ，代碼如下： **index.ts** ~~~ // --------------------------- 約束 Class 的接口 --------------------------- interface Radio { // 參數布爾類型，viod不返回內容 switchRadio(trigger: boolean): void } // --------------------------- Class 類 --------------------------- // 汽車類 class Car implements Radio { // 打開收音機方法 switchRadio(trigger: boolean){ } } // 手機類 class Cellphone implements Radio{ // 打開收音機方法 switchRadio(trigger: boolean){ } } ~~~ 我們需要在使用 **interface（接口）** 的 **Class類** 上添加 **implements** ， 這時候我們的 **interface（接口）** 就發揮了 **契約的作用** ， **Car 、Cellphone** 必須要去實現 **switchRadio** 這個方法，否則就會報錯，通過 **interface（接口）** 我們完成了 **邏輯功能的提取跟驗證** 。 >[success] ## 多個 interface（接口）約束 Class 類 這個時候我們有一個小的特性功能， **檢查電池的容量** ，這個特性功能，**Cellphone（手機）類** 有，**Car（汽車）** 沒有，這時候我們需要重新聲明一個 **interface（接口）** ，**Class 類** 使用 **多個接口** 時，只需要添加 **逗號分隔** 即可。 **index.ts** ~~~ // --------------------------- 約束 Class 的接口 --------------------------- interface Radio { // 參數布爾類型，viod不返回內容 switchRadio(trigger: boolean): void } interface Battery { checkBatteryStatus(): void } // --------------------------- Class 類 --------------------------- // 汽車類 class Car implements Radio { // 打開收音機方法 switchRadio(trigger: boolean){ } } // 手機類 class Cellphone implements Radio, Battery { // 打開收音機方法 switchRadio(trigger: boolean){ } // 檢查電池狀態方法 checkBatteryStatus(){ } } ~~~ >[success] ## interface（接口）之間的繼承 **interface（接口）** 也可以 **繼承** ，注意是 **interface（接口）** 的 **繼承** ，而不是 **Class 的繼承** ，但是 **寫法跟 Class 的繼承**是一樣的，如下： **index.ts** ~~~ // --------------------------- 約束 Class 的接口 --------------------------- // 收音機 interface Radio { // 參數布爾類型，viod不返回內容 switchRadio(trigger: boolean): void } // 電池 interface Battery { checkBatteryStatus(): void } // 收音機與電池 // 接口繼承 interface RadioWithBattery extends Radio { checkBatteryStatus(): void } // --------------------------- Class 類 --------------------------- // 汽車類 class Car implements Radio { // 打開收音機方法 switchRadio(trigger: boolean){ } } // 手機類 class Cellphone implements RadioWithBattery{ // 打開收音機方法 switchRadio(trigger: boolean){ } // 檢查電池狀態方法 checkBatteryStatus(){ } } ~~~