1、TypeScript 接口继承

和类一样，接口也可以通过关键字 extents 相互继承。接口继承，分为：单继承和多继承，即继承多个接口。另外，接口也可以继承类，它会继承类的成员，但不包括具体的实现，只会把类的成员作为一种声明。本文主要总结一下TypeScript 接口继承，方便大家进行系统化的学习。

2、单继承

interface Shape {
   name: string;
}

interface Circle extends Shape {
   radius: number;
}

let circle = {} as Circle;
 
// 继承了 Shape 的属性
circle.name = "circle";

circle.radius = 10;

3、多继承

接口能够像类一样对接口进行继承，但不同的是类只能是单继承，而接口既可以实现单继承也可以多继承，多个接口以逗号分隔。

interface Color {
   color: string;
}

interface Shape {
   name: string;
}

interface Circle extends Color, Shape {
   radius: number;
}

当一个接口继承了其他接口后，子接口既包含了自身定义的类型成员，也包含了父接口中的类型成员。下例中，Circle接口同时继承了Style接口和Shape接口，因此Circle接口中包含了color、name和radius属性：

const c: Circle = {
   color: 'red',
   name: 'circle',
   radius: 10
};

4、接口继承中的同名成员的兼容问题

在接口继承中，可能会出现同名成员，面对同名成员这种情况，怎么处理呢？主要分为以下两种情况：

4.1、同名成员的类型必须兼容

如果子接口与父接口之间存在同名的类型成员，那么子接口中的类型成员具有更高的优先级。同时，子接口与父接口中的同名类型成员必须是类型兼容的。也就是说，子接口中同名类型成员的类型需要能够赋值给父接口中同名类型成员的类型，否则将产生编译错误。示例如下：

interface Style {
   color: string;
}

interface Shape {
   name: string;
}

interface Circle extends Style, Shape {
   name: 'circle';
   color: number;
//  ~~~~~~~~~~~~~
//  编译错误：'color' 类型不兼容，
//  'number' 类型不能赋值给 'string' 类型
}

Circle接口同时继承了Style接口和Shape接口。Circle接口与父接口之间存在同名的属性name和color。Circle接口中name属性的类型为字符串字面量类型'circle'，它能够赋值给Shape接口中string类型的name属性，因此是正确的。而Circle接口中color属性的类型为number，它不能够赋值给Color接口中string类型的color属性，因此产生编译错误。

4.2、同名成员的类型必须相同

如果仅是多个父接口之间存在同名的类型成员，而子接口本身没有该同名类型成员，那么父接口中同名类型成员的类型必须是完全相同的，否则将产生编译错误。示例如下：

interface Color {
   draw(): { color: string };
}

interface Shape {
   draw(): { x: number; y: number };
}

interface Circle extends Style, Shape {}
//        ~~~~~~
//        编译错误

Circle接口同时继承了Color接口和Shape接口。Color接口和Shape接口都包含一个名为draw的方法，但两者的返回值类型不同。当Circle接口尝试将两个draw方法合并时发生冲突，因此产生了编译错误。

解决这个问题的一个办法是，在Circle接口中定义一个同名的draw方法。这样Circle接口中的draw方法会拥有更高的优先级，从而取代父接口中的draw方法。这时编译器将不再进行类型合并操作，因此也就不会发生合并冲突。但是要注意，Circle接口中定义的draw方法一定要与所有父接口中的draw方法是类型兼容的。示例如下：

interface Color {
   draw(): { color: string };
}

interface Shape {
   draw(): { x: number; y: number };
}

interface Circle extends Color, Shape {
   draw(): { color: string; x: number; y: number };
}

Circle接口中定义了一个draw方法，它的返回值类型为“{ color: string; x: number; y: number }”。它既能赋值给“{ color: string }”类型，也能赋值给“{ x: number; y: number }”类型，因此不会产生编译错误。

5、接口继承类

接口可以对类实现继承，但只能继承类的成员，不会继承类成员的实现。

class Person{
       name:string = 'Tom'
       age: number = 20
       sayHello():void{
              console.log('Hello world');
       }
}

interface IPerson extends Person{

}

class Peter extends Person implements IPerson{}

上述代码不会报错，因为Peter类继承了Person类，已经具有了Person中的成员，再去实现IPerson接口，即使不写内容也不会报错

class Gary implements IPerson{}

上述代码会报错，直接实现接口就会报错，因为接口继承了Person类，所以接口中的属性也应该在类Yannis中定义并实现

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• 用原生JS可以做一个有拖曳效果的登录框吗

  这篇文章主要为大家详细介绍了原生JS实现可拖拽登录框，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

• VUE递归实现树形组件的代码是什么，要点有哪些

  本文实例为大家分享了vue递归实现树形组件的具体代码，供大家参考，具体内容如下1. 先来看一下效果：2. 代码部分 （myTree.vue）图片可以自己引一下自己的图片，或者使用iconfont的css引入。template    div class=tree        ul class=ul           

• JSON字符串转对象过程报错怎么回事，如何处理

  这篇文章主要介绍了nodejs将JSON字符串转化为JSON对象报错的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

• 如何用JS代码实现一键复制的功能

  目录引言代码实现效果引言有时候为了方便用户快速复制页面的内容，一般的做法就是添加一个按钮给用户点击一下就复制下来了，这边使用JavaScript原生的方法进行设置剪贴板。代码copy.html!DOCTYPE htmlhtmlhead title一键复制demo/title meta charset=utf

• 怎样用vue实现点赞动画效果？

  怎样用vue实现点赞动画效果？现在很多网站平台都有点赞功能，这篇文章就给大家分享怎样用vue实现一个好看的点赞动画，当点赞时，同时点亮爱心和增加点赞数，效果如下，感兴趣的朋友就继续往下看吧。