我眼中的在typescript中,interface和abstract 的异同点

之前我的这篇文章 TYPESCRIPT 关于interface理解 介绍了interface的一些理解。

其中提到了在面向对象编程时,多态的实现interface可以做到,同理abstract也可以做到。不过使用它们,有着相同点和不同点,下面先来介绍一下abstract的使用,再来总结它们之间的异同点。

介绍abstract 相关知识

abstract,含义:抽象。
可以用来定义类和方法,让他们变成抽象类和抽象方法

抽象类:

abstract class Person {
    name: string;
    constructor(name) {
     this.name = name;
    }
    abstract sayHi(); //抽象方法
}

注意事项

  • 抽象类是不允许被实例化的
let test = new Person('小明');

//报错
//Cannot create an instance of an abstract class.
  • 抽象类中的抽象方法必须在子类中实现
class Child extends Person {
  run() {
    console.log('learn to run...');
  }
}

let child = new Child();

//这样写会报错
//Non-abstract class 'Child' does not implement inherited abstract member 'sayHi' from class 'Person'.

修改成这样的,就可以正常编译通过了:

class Child extends Person {
  run() {
    console.log(this.name + ' ' + 'learn to run...');
  }

  sayHi() {
    console.log('hello,everyone');
  }
}

let child = new Child('小明');
child.sayHi();
child.run();

执行ts转化为js文件的操作后,打印结果如下:

hello,everyone
小明 learn to run...

那会到正题上,上一篇关于 typescript中的interface的理解,我们使用了造门的例子。那使用abstract再来实现一遍例子吧。

  • 将门的形状定义为一个接口,为后面对象赋值使用
interface DoorAttribute {
    height: number;
    width: number;
    color: string;
    texture: string;
}
  • 车和房子都需要建门,所以将 建门的抽象方法 此时定义在 抽象父类 中,子类继承父类后再去具体实现这个抽象方法。

如下,为抽象的父类Thing

abstract class Thing {
    height;
    width;
    color;
    texture;
  setAttribute(doorAttribute: DoorAttribute) {
    // console.log('==>',doorAttribute)
    this.height = doorAttribute.height;
    this.width = doorAttribute.width;
    this.color = doorAttribute.color;
    this.texture = doorAttribute.texture;
  };
  abstract buildDoor();
}

相比较上篇文章,类Thing 的定义多了关键字abstract,同时在里面也多了抽象方法buildDoor

  • 然后,根据上述所说的abstract的特性,我们在子类中实现这个抽象方法buildDoor

    在子类House, 它继承了父类Thing,在类里,具体实现buildDoor抽象方法

class House extends Thing {
     buildDoor() {
         console.log(`house door is, height: ${this.height},width:${this.width}
            color: ${this.color}, texture: ${this.texture}!`);
     }
}

在子类Car, 它同样也继承了抽象父类Thing,在类里,具体实现buildDoor抽象方法

class Car extends Thing  {
    buildDoor() {
        console.log(`car door is, height: ${this.height},width:${this.width}
            color: ${this.color}, texture: ${this.texture}!`);
    }
}

这里与之前interface实现例子的区别是,删去了 implements Door 这些代码

  • 实例化House和car,测试验证结果
const house = new House();
const houseValue: DoorAttribute = { height: 800, width: 200, color: 'red', texture: 'wood', };
house.setAttribute(houseValue);
house.buildDoor();


const car = new Car();
const carValue: DoorAttribute = { height: 300, width: 600, color: 'black', texture: 'aluminum', };
car.setAttribute(carValue);
car.buildDoor();

经过typescript的编译和转化,打印结果如下,与之前的interface实现是一致的

house door is, height: 800,width:200
            color: red, texture: wood!
car door is, height: 300,width:600
            color: black, texture: aluminum!

所以,综上所述,我这边想总结下,在typescript中,interface和abstract的异同点:

相同点:

1、都是关键字

2、都可以体现多态的特点

3、interface实现类、abstract class的子类,都必须要实现已经声明的抽象方法

不同点:

不同点

总的来说,抽象类和接口在很大程度上都是可以互相替换使用的,但就是由于抽象类本身具备单继承局限性,所以当抽象类和接口全部都可以使用的时候优先考虑接口,因为接口没有单继承局限性。

以下是写本篇文章的,借鉴的一些参考文章:

typescript进阶类

abstract class和interface的异同点

对比abstract 和class

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

推荐阅读更多精彩内容