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 接口继承的更多相关文章

  1. 从C#到TypeScript - 接口

    总目录 从C#到TypeScript - 类型 从C#到TypeScript - 高级类型 从C#到TypeScript - 变量 从C#到TypeScript - 接口 从C#到TypeScript ...

  2. typescript接口(学习笔记非干货)

    typescript的核心原则之一就是对所具有的shape类型检查结构性子类型化 One of the core principles of typescript is to check struct ...

  3. Typescript 接口(interface)

    概述 typescript 的接口只会关注值的外形,实际就是类型(条件)的检查,只要满足就是被允许的. 接口描述了类的公共部分. 接口 interface Person { firstName: st ...

  4. 《三》大话 Typescript 接口

    > 前言: 本文章为 TypeScript 系列文章. 旨在利用碎片时间快速入门 Typescript. 或重新温故 Typescript 查漏补缺.在官方 api 的基础上, 加上一些日常使用 ...

  5. TypeScript接口与类的使用

    一.TypeScript接口 Interfaces 可以约定一个对象的结构 一个对象去实现一个接口 就必须拥有这个接口中所有的成员用interface定义接口, 并且定义接口中成员的类型 编译之后会发 ...

  6. Effective C++ 34 区分接口继承和实现继承

    public继承从根本上讲,有两部分:接口继承和实现继承.两者之前的区别很像函数声明与函数定义. 具体设计中,会呈现三种形式:derived class只继承成员函数的接口(纯虚函数):derived ...

  7. Effective C++ -----条款34:区分接口继承和实现继承

    接口继承和实现继承不同.在public继承之下,derived classes总是继承base class的接口. pure virtual函数只具体指定接口继承. 简朴的(非纯)impure vir ...

  8. [技术学习]js接口继承

    js是面向对象语言,但是js又缺乏了面向对象的诸多特性,比如继承,没有接口继承也没有父类继承,因此有时候需要人工来实现继承. 一.首先看下java中面向对象的继承: //定义类鸟类的飞行动作 inte ...

  9. c++ 接口继承和实现继承

    所谓接口继承,就是派生类只继承函数的接口,也就是声明:而实现继承,就是派生类同时继承函数的接口和实现. 我们都很清楚C++中有几个基本的概念,虚函数.纯虚函数.非虚函数. 虚函数: 虚函数是指一个类中 ...

随机推荐

  1. WCF学习系列汇总

    最近在学习WCF,打算把一整个系列的文章都”写“出来,包括理论和实践,这里的“写”是翻译,是国外的大牛写好的,我只是搬运工外加翻译.翻译的不好,大家请指正,谢谢了.如果觉得不错的话,也可以给我点赞,这 ...

  2. DataAdapter与DataSet的使用

    1.创建数据库连接: 2.创建数据适配器(Adapter); 3.创建容器数据集(DataSet); 4.从数据集中取出指定表: 5.遍历表数据并输出: using System; using Sys ...

  3. Java并发编程:阻塞队列(转载)

    Java并发编程:阻塞队列 在前面几篇文章中,我们讨论了同步容器(Hashtable.Vector),也讨论了并发容器(ConcurrentHashMap.CopyOnWriteArrayList), ...

  4. Linux磁盘空间被未知资源耗尽【转】

    Linux磁盘空间被未知资源耗尽 在linux中,当我们使用rm在linux上删除了大文件,但是如果有进程打开了这个大文件,却没有关闭这个文件的句柄,那么linux内核还是不会释放这个文件的磁盘空间, ...

  5. Symmetric Tree——LeetCode

    Given a binary tree, check whether it is a mirror of itself (ie, symmetric around its center). For e ...

  6. "ping: unknown host www.baidu.com" 解决方法

    如果某台Linux服务器ping不通域名, 如下提示: # ping www.baidu.comping: unknown host www.baidu.com 如果确定网络没问题的情况下, 可以通过 ...

  7. C语言中 if 和 else if 的区别

    先看代码:我们本意是对i不同的值有不同的判断. #include<stdio.h> int main(void) { ; ) { i++; printf("%d\n", ...

  8. Three.js基础探寻四——立方体、平面与球体

    前面简单介绍了webGL和Three.js的背景以及照相机的设定,接下来介绍一些Three.js中的几何形状. 1.立方体 虽然这一形状的名字叫立方体(CubeGeometry),但它其实是长方体,也 ...

  9. springboot(八)自定义Filter、自定义Property

    自定义Filter 我们常常在项目中会使用filters用于录调用日志.排除有XSS威胁的字符.执行权限验证等等. Spring Boot自动添加了OrderedCharacterEncodingFi ...

  10. 最简单的Linux下apache+mysql+php安装

    转载:http://www.jb51.net/article/29843.htm ubuntu下需要先更新系统后 流程笔记: 1.打开终端,输入“sudo apt-get install apache ...