TypeScript 接口继承

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中定义并实现

6、参考

http://www.mybatis.cn/typescript/1981.html

TypeScript 接口继承的更多相关文章

从C#到TypeScript - 接口
总目录从C#到TypeScript - 类型从C#到TypeScript - 高级类型从C#到TypeScript - 变量从C#到TypeScript - 接口从C#到TypeScript ...
typescript接口(学习笔记非干货)
typescript的核心原则之一就是对所具有的shape类型检查结构性子类型化 One of the core principles of typescript is to check struct ...
Typescript 接口（interface）
概述 typescript 的接口只会关注值的外形,实际就是类型(条件)的检查,只要满足就是被允许的. 接口描述了类的公共部分. 接口 interface Person { firstName: st ...
《三》大话 Typescript 接口
> 前言: 本文章为 TypeScript 系列文章. 旨在利用碎片时间快速入门 Typescript. 或重新温故 Typescript 查漏补缺.在官方 api 的基础上, 加上一些日常使用 ...
TypeScript接口与类的使用
一.TypeScript接口 Interfaces 可以约定一个对象的结构一个对象去实现一个接口就必须拥有这个接口中所有的成员用interface定义接口, 并且定义接口中成员的类型编译之后会发 ...
Effective C++ 34 区分接口继承和实现继承
public继承从根本上讲,有两部分:接口继承和实现继承.两者之前的区别很像函数声明与函数定义. 具体设计中,会呈现三种形式:derived class只继承成员函数的接口(纯虚函数):derived ...
Effective C++ -----条款34：区分接口继承和实现继承
接口继承和实现继承不同.在public继承之下,derived classes总是继承base class的接口. pure virtual函数只具体指定接口继承. 简朴的(非纯)impure vir ...
[技术学习]js接口继承
js是面向对象语言,但是js又缺乏了面向对象的诸多特性,比如继承,没有接口继承也没有父类继承,因此有时候需要人工来实现继承. 一.首先看下java中面向对象的继承: //定义类鸟类的飞行动作 inte ...
c++ 接口继承和实现继承
所谓接口继承,就是派生类只继承函数的接口,也就是声明:而实现继承,就是派生类同时继承函数的接口和实现. 我们都很清楚C++中有几个基本的概念,虚函数.纯虚函数.非虚函数. 虚函数: 虚函数是指一个类中 ...
pure virtual、impure virtual、non-virtual函数的接口继承和实现继承
1.abstract class 拥有pure virtual函数的class是abstract class. 不能创建abstract class的实体. 2.pure virtual 函数他们必 ...

随机推荐

PHP之封装一些常用的工具类函数
分享一些PHP中常用的工具里函数: <?php /** * Created by PhpStorm. * User: Steven * Date: 2016/8/12 * Time: 14:21 ...
PHP极客水平测试——给创业公司用的远程面试题
出了份面试题<PHP极客水平测试>,创业公司可以用这个远程笔试啦,先答题,看答案合适了再邀请面试.希望对创业公司有所帮助,欢迎围观提建议哦^_^ 题目会持续更新. 答题地址:http:// ...
python基础-PyCharm设置作者信息模板_修改解释器_设置软件UTF-8编码
一.PyCharm 设置作者信息模板 1.File---Settings---在搜索框中搜索:File and Code Templates---Python scripts #!/usr/bin/e ...
对于sharepoint 的解决方案的实际说明
对于sharepoint 的解决方案实际上就是cab的包你把***.wsp改为***.cab我们就可以查看这个包中的所有内容了
SQL Server 错误：15023（创建对于用户失败）
问题: 错误15023:当前数据库中已存在用户或角色在把远程服务器上的数据库备份还原到本地机后, 给一个"登录"关联一个"用户"时(用户映射),发生错误:“错 ...
输入和输出的总结(c语言)
c语言中有多种的输入和输出方式,下面就简单总结一下: 一.输入的三种方式 (1)scanf scanf 函数可以在变量中使用,也可以在数组中使用,当然指针上也能用到,是一个很好的输入函数.scanf是 ...
3 years in Tencent game
心里一直有继续写博文的愿望,却一直被各种借口打断,现在回头一看,已经在腾讯待了3年半之久.3年半是个比较尴尬的时间点,不好意思说自己是游戏从业老兵,但又觉得自己对于行业已经看到比较清楚了:从当年毕业时 ...
PHPCMS v9栏目添加字段及描述编辑器修改方法
为PHPCMS v9栏目添加字段和把描述的textarea编辑器变成fceditor编辑器的方法.如下: 1. 添加数据库字段:description1,添加位置:v9_catetory表 2. 在c ...
There is no satiety in study
好不容易考上了硕士.这个时候,才终于明白什么叫做学无止境.用了1周linux,发现需要学习的东西太多了.life is too short to learn c plus plus 果然如此.不过我们 ...
less的学习（css）
因为新公司需要用less来写样式,对于用惯了css的我来说还是觉得有点麻烦但是呢,都是有个过程嘛,学习必须走起嘛. 写到半中央发现一个写的特别好的less帖子,就不写. http://www.w3c ...