🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
[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(){ } } ~~~