TypeScript 接口继承的具体使用

目录
  • 1、TypeScript 接口继承
  • 2、单继承
  • 3、多继承
  • 4、接口继承中的同名成员的兼容问题
    • 4.1、同名成员的类型必须兼容
    • 4.2、同名成员的类型必须相同
  • 5、接口继承类
  • 6、参考

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 接口继承的文章就介绍到这了,更多相关TypeScript 接口继承内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 如何在TypeScript 中实现接口的类

    使用 implements 子句在类中实现接口,例如 class Developer implements Employee {}. implements 子句通过定义类的所有属性和方法来检查类是否满足接口. interface Employee { id: number; name: string; tasks: string[]; doWork(): void; } class Developer implements Employee { constructor( public id: n

  • 基于Typescript与Axios的接口请求管理详解

    目录 思路 请求拦截 响应拦截 使用httpClient.ts定义请求 在组件中请求接口 总结 本文主要介绍基于TS和AXIOS的接口请求封装 思路 请求拦截 在请求头添加一些参数,例如token,uid等 判断用户登录状态,如果没有登录,直接跳转登录 处理请求数据转换发送请求的数据格式,json→urlencoded (可选的) 响应拦截 判断后端响应的业务状态码,进行不同的处理 例如用户登录状态过期,直接跳转登录 统一的报错提示 先把套路化的代码写出来: import axios, { Ax

  • TypeScript定义接口(interface)案例教程

    接口的作用: 接口,英文:interface,其作用可以简单的理解为:为我们的代码提供一种约定. 在Typescript中是这么描述的: TypeScript的核心原则之一是对值所具有的结构进行类型检查.它有时被称做"鸭式辨型法"或"结构性子类型化". 在TypeScript里,接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约. 举个例子: // 定义接口 Person interface Person { name: string; age: numb

  • typeScript 核心基础之接口interface

    目录 1.接口定义 2.接口继承 3.类实现接口 前言: 在面向对象语言中,接口是一个很重要的概念,它是对行为的抽象.接口也叫 interface . 在 js 中没有接口这个概念,它是新增的.该如何定义呢?下面来一起学习吧 1.接口定义 接口的作用: 在面向对象编程中,接口是一种规范的定义,它定义了行为和动作规范: 在程序设计内,接口起到一种限制和规范的作用: 接口一般使用 interface 关键字来定义,名字首字母需要大写.在项目中定义接口的时候,一般在名字前加一个大写 I 字母,能够快速

  • TypeScript 中接口详解

    在 TypeScript 中,接口是用作约束作用的,在编译成 JavaScript 的时候,所有的接口都会被擦除掉,因为 JavaScript 中并没有接口这一概念. 先看看一个简单的例子: function printLabel(labelledObj: { label: string }) { console.log(labelledObj.label); } var myObj = { size: 10, label: "Size 10 Object" }; printLabel

  • TypeScript中的接口和泛型你了解吗

    TypeScript中的接口和泛型你了解吗

    目录 接口 对象类型 索引类型 函数类型 继承 交叉类型 接口实现 interface和type的区别 字面量赋值 枚举类型 泛型 泛型函数 泛型接口 泛型类 类型约束 总结 接口 使用 interface 关键字来定义数据类型 对象类型 当存在于较长的数据类型约束时,我们可以通过 type 关键字 为类型注解起别名,也可以通过接口来定义 type UserType = { name: string; age?: number }; const user: UserType = { name:

  • TypeScript接口介绍

    目录 1.接口的定义 2.属性 2.1可选属性 2.2只读属性 3.类类型 3.1继承接口 4.函数类型 前言: TS的核心原则之一就是对所具有的结构 进行类型检查.接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约. 最终被编译成JavaScript代码后不包含接口以及类型约束的代码. 1.接口的定义 接口的作用于type关键字类似,但是又不一样.type可以定义简单的数据类型,例如如下代码 type str = string 这种写法就不能应用在 接口 中,接口中只能写函数类型和类

  • PHP接口继承及接口多继承原理与实现方法详解

    本文实例讲述了PHP接口继承及接口多继承原理与实现方法.分享给大家供大家参考,具体如下: 在PHP的接口中,接口可以继承接口.虽然PHP类只能继承一个父类(单继承),但是接口和类不同,接口可以实现多继承,可以继承一个或者多个接口.当然接口的继承也是使用extends关键字,要多个继承的话只要用逗号把继承的接口隔开即可. 需要注意的是当你接口继承其它接口时候,直接继承父接口的静态常量属性和抽象方法,所以类实现接口时必须实现所有相关的抽象方法. 现在你对PHP接口的继承有所了解了吧,下面的例子可供参

  • Java接口继承和使用接口操作示例

    本文实例讲述了Java接口继承和使用接口操作.分享给大家供大家参考,具体如下: 一 接口的继承 1 点睛 接口支持多继承,一个接口可以有多个父接口,子接口扩展某个父接口,将会获得父接口里定义的所有抽象方法.常量. 一个接口继承多个父接口时,多个父接口排在extends关键字之后. 2 代码 interface interfaceA { int PROP_A = 5; void testA(); } interface interfaceB { int PROP_B = 6; void testB

  • go语言interface接口继承多态示例及定义解析

    目录 1.什么是接口 2.接口定义 3.多态 多态加减计算器 4.接口继承与转换 5.空接口 6.接口转换 7.实现map字典接口 8.interface案例 1.什么是接口 接口就是一种规范与标准,在生活中经常见接口,例如:笔记本电脑的USB接口,可以将任何厂商生产的鼠标与键盘,与电脑进行链接.为什么呢?原因就是,USB接口将规范和标准制定好后,各个生产厂商可以按照该标准生产鼠标和键盘就可以了. 在程序开发中,接口只是规定了要做哪些事情,干什么.具体怎么做,接口是不管的.这和生活中接口的案例也

  • PHP面向对象程序设计高级特性详解(接口,继承,抽象类,析构,克隆等)

    本文实例讲述了PHP面向对象程序设计高级特性.分享给大家供大家参考,具体如下: 静态属性 <?php class StaticExample { static public $aNum = 0; // 静态共有属性 static public function sayHello() { // 静态共有方法 print "hello"; } } print StaticExample::$aNum; StaticExample::sayHello(); ?> 输出:0   

  • 详细对比php中类继承和接口继承

    PHP类继承: 1.PHP类不支持多继承,也就是子类只能继承一个父类,但是支持多层次继承 比如: class frist{ public function __construct(){ echo "我是第一个类.","<br>"; } public function printer(){ echo "frist","<br>"; } } class seconds extends frist{} cla

  • python接口,继承,重载运算符详解

    python接口,继承,重载运算符详解

    目录 1. 序列__getitem__ 2. __setitem__ 3. 抽象基类 4. 不要直接子类化内置类型 5. 继承顺序 6. 重载运算符 总结 1. 序列__getitem__ 如果没有 __iter__ 和 __contains__ 方法, Python 会调用 __getitem__ 方法, 设法让 迭代 和 in 运算符可用 class Foo: def __getitem__(self, pos): return range(0, 30, 10)[pos] f = Foo()

  • TypeScript 学习笔记之 typeScript类定义,类的继承,类成员修饰符

    目录 1.类的定义 2.类的继承 3.修饰符 前言: typeScript 中的类与 ES6 中的类非常相似,如果不知道 ES6 中的类,建议先学习下 ES6 中的 class .本篇文章重点介绍 typeScript 中的类定义.继承以及修饰符. 1.类的定义 类描述了所创建的对象共同的属性和方法.typeScript 支持面向对象的所有特性,比如类.接口等. 在 typeScript 中定义类的时候,使用 class 关键字,类名首字母使用大写,类可以包含以下三个模块: ​字段​ - 字段是

  • Java基础教程之接口的继承与抽象类

    Java基础教程之接口的继承与抽象类

    在实施接口中,我们利用interface语法,将interface从类定义中独立出来,构成一个主体.interface为类提供了接口规范. 在继承中,我们为了提高程序的可复用性,引入的继承机制.当时的继承是基于类的.interface接口同样可以继承,以拓展原interface. 接口继承 接口继承(inheritance)与类继承很类似,就是以被继承的interface为基础,增添新增的接口方法原型.比如,我们以Cup作为原interface: 复制代码 代码如下: interface Cup

随机推荐