博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
聊聊TypeScript中类、接口之间相互继承与实现的那些事儿
阅读量:6914 次
发布时间:2019-06-27

本文共 3352 字,大约阅读时间需要 11 分钟。

本文讲述了类的继承、接口的实现中需要注意的一些小细节,同时也对类、接口的多继承做了一些讲解。

先看一下继承

类的继承

子类继承了父类之后,就会将父类中定义的非 private 属性以及方法都继承下来

class Animal {      public name: string = "Animal";      public age: number;      sayHello() {          console.log(`Hello ${ this.name }`);      }  }  class Dog extends Animal {      age: number;      constructor(age) {          super();          this.age = age;      }  }  const dog = new  Dog(6);  dog.sayHello();复制代码

由于 Dog 继承了 Animal 类,所以同时也继承了 Animal 的 name 属性和 sayHello 方法,因此可以直接使用 dog 实例调用 sayHello 方法。 那么问题来了:如果可以进行多继承,若多个父类中都包含同一个属性,那么子类使用的应该是哪个父类的属性呢? 因此 TypeScript 中不允许进行多继承,可是我就是想进行类的多继承该怎么办呢?可以使用用下节所说的 Mixins 的方式。

类的多继承(Mixins 模拟)

  • 先定义两个类,Person 和 Student 类
// Person 类  class Person {      name: string;      sayHello() {          console.log('tag', `Helo ${ this.name }!`)      }  }  // Student 类  class Student {      grade: number;      study() {          console.log('tag', ' I need Study!')      }  }复制代码
  • 下面创建一个类,结合 Person 和 Student 这两个类 首先应该注意到的是,没使用 extends 而是使用 implements。 把类当成了接口,仅使用 Person 和 Student 的类型而非其实现。 我们可以这么做来达到目的,为将要mixin进来的属性方法创建出占位属性。 这告诉编译器这些成员在运行时是可用的。
class SmartObject implements Person, Student {      // Person      name: string = 'person';      sayHello: () => void;      // Activatable      grade: number = 3;      study: () => void;  }复制代码
  • 最后,把mixins混入定义的类,完成全部实现部分
// 把mixins混入定义的类  applyMixins(SmartObject, [Person, Student]);  // applyMixins 方法  function applyMixins(derivedCtor: any, baseCtors: any[]) {      baseCtors.forEach(baseCtor => {          Object.getOwnPropertyNames(baseCtor.prototype).forEach(name => {              derivedCtor.prototype[name] = baseCtor.prototype[name];          })      });  }复制代码

接口与类之间的继承

接口继承类的方式以及特点与上面类的继承和类的多继承一致。

接口与接口之间的多继承

接口与接口之间是可以直接进行多继承的。

  • 先定义两个接口
// 阿里接口  interface Ali  {      pay: () => void  }  // 腾讯接口  interface Tencent {      game: string      play: () => void  }复制代码
  • 在定义一个接口继承 Ali、Tencent 接口
// 自己的接口  interface Self extends Ali, Tencent {      name: string      say: () => void  }复制代码

此时Self 接口就包含了 Ali 和 Tencent 接口中所有的属性和方法

  • 验证一下 用一个类继承 Self 接口,必须要将 Ali、 Tencent、 Self 接口中包含的所有属性和方法都声明了才可以,不然会编译报错
// 使用 Test 类实现 Self 接口  class Test extends Self {      game: string;      name: string;      pay() {          cosole.log('经常用于支付');      }      play() => {          cosole.log('可以玩各种游戏');      }      say() {          cosole.log('不知道说点儿什么');      }  }复制代码

再来看一下接口的实现

接口的实现

接口在定义的时候,不能初始化属性以及方法,属性不能进行初始化,方法不能实现方法体。 类实现接口之后,必须声明接口中定义的属性以及方法。

interface Animal {      name: string;      eat: () => void;  }  class Dog implements Animal {      name: string;      eat() {          console.log('tag', 'I love eat bone!')      }  }  const dog: Dog = new Dog();  dog.eat();复制代码

类对于接口的多实现

一个类可以实现多个接口,不过要将实现的所有接口的属性和方法都实现了。

// 动物接口  interface Animal {      name: string;      eat: () => void;  }  // 猫科接口  interface Felidae {      claw: number;      run: () => void;  }  // 让猫类实现 Animal 和 Felidae 两个接口  class Cat implements Animal, Felidae {      name: string;      claw: number;      eat() {          console.log('tag', 'I love eat Food!');      }      run: () {          console.log('tag', 'My speed is very fast!')      }  }  const dog: Dog = new Dog();  dog.eat();复制代码

总结

  • 类与类之间只能进行单继承,想要实现多继承需要使用 Mixins 的方式

  • 接口继承类也只能进行单继承,想要实现多继承需要使用 Mixins 的方式 Mixins 方式模拟多继承的缺陷:

    • 只能在继承一级父类的方法和属性

    • 如果父类中含有同一种方法或属性,会根据赋值的顺序,先赋值的会被覆盖掉

  • 接口与接口之间可以直接进行多继承

  • 类实现接口可以进行多实现,每个接口用 , 隔开即可

转载地址:http://xaicl.baihongyu.com/

你可能感兴趣的文章
SQL GROUP BY 语句
查看>>
简单介绍一些HTML代码(字幕、音频和视频)
查看>>
Java——复选框:JCheckBox
查看>>
用android模拟器Genymotion定位元素
查看>>
iOS学习:UILabel和sizeWithFont方法
查看>>
“伴侣”机器人问世 宅男宅女们这下有福了!
查看>>
我的友情链接
查看>>
Android开发 - 更"聪明"的申请权限方式
查看>>
SVN配置安装
查看>>
linux基础命令 grep
查看>>
Awstats服务
查看>>
linux源地址转换(一)
查看>>
ZooKeeper客户端Curator使用一 创建连接
查看>>
图文说明虚拟机的几种网络模式
查看>>
将 instance 连接到 first_local_net - 每天5分钟玩转 OpenStack(82)
查看>>
Ubuntu屏幕截图快捷键知多少
查看>>
JQuery Select多选插件实现
查看>>
1-Ictclas50分词系统ForJava
查看>>
51CTO篮球俱乐部精彩集锦(5月9日)
查看>>
如何找到适合自己的学习方法
查看>>