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类,所以接口中的属性也应该在类Gary中定义并实现

参考:TypeScript 接口继承

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 220,367评论 6 512
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,959评论 3 396
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 166,750评论 0 357
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 59,226评论 1 295
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 68,252评论 6 397
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,975评论 1 308
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,592评论 3 420
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,497评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 46,027评论 1 319
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,147评论 3 340
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,274评论 1 352
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,953评论 5 347
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,623评论 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,143评论 0 23
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,260评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,607评论 3 375
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,271评论 2 358

推荐阅读更多精彩内容

  • 什么是设计模式 设计模式(Design pattern)是一套被反复使用、多数人知晓的、经过分类编目的、代码设计经...
    辽A丶孙悟空阅读 743评论 1 15
  • TypeScript的核心原则之一是对值所具有的结构进行类型检查。 它有时被称做“鸭式辨型法”或“结构性子类型化”...
    2o壹9阅读 639评论 0 48
  • 本文首发于 TS:TypeScript 简单入门[https://gitee.com/reallimengzhe/...
    limengzhe阅读 1,063评论 0 1
  • 基本使用 ts的接口好比一个名字,用来描述对象的类型要求,通过interface 关键字定义interface L...
    dqqbl阅读 182评论 0 0
  • ## **JavaScript设计模式** ## **设计模式简介** 设计模式代表了最佳的实践,通常被有经验的面...
    你别太自信阅读 190评论 0 0