TypeScript interface 类类型 继承接口

类实现接口

一个类实现一个接口,与Java里接口的基本作用一样。

一个demo🌰

// 动物的接口 
interface Animal {
  type: string;
  sound: string;
  voice():void;
}

// Dog类实现接口
class Dog implements Animal {
  type:string;
  sound: string;

  voice():void {
    console.log(`${this.sound}, 我是${this.type}`)
  }

  constructor(sound: string,type: string) { 
    this.sound = sound
    this.type = type
  }
}

// Cat类实现接口
class Cat implements Animal {
  type: string;
  sound: string;

  voice(): void {
    console.log(`${this.sound}, 我是${this.type}`)
  }

  constructor(sound:string, type: string) {
    this.sound = sound;
    this.type = type;
  }
}

new Cat("喵喵~","哺乳类").voice();
new Dog("汪汪~","哺乳类").voice();

打印结果:

喵喵~, 我是哺乳类
汪汪~, 我是哺乳类

继承接口

接口可以相互继承

一个demo🌰

// 生物体的接口
interface Creature  {
  name: string;
}

// 动物接口  继承生物接口
interface Animal extends Creature {
  // 自己拥有的属性 action
  action(): void;
}

class Dog implements Animal {
  name: string; // name是 Animal继承自 Creature的,不实现会报错
  action(): void {
    console.log(`我是${this.name}`)
  }

  constructor (name: string) {
    this.name = name;
  }
}

new Dog("狗狗").action()  // 我是狗狗

类必须实现它的接口的所有属性,包括它继承自父类的属性

💦另外:接口可以多继承:一个接口可以继承多个接口

一个demo🌰

// 生物体的接口
interface Creature {
  name: string;
}

// 动物接口  
interface Animal {
  // 自己拥有的属性 action
  action(): void;
}

// 狗Dog接口继承 生物Creature 和 Animal 多继承
interface Dog extends Creature, Animal{
  color: string;
}

class Golden implements Dog {
  name: string;
  color: string;
  action():void {
    console.log(`我是${this.name},我的颜色是${this.color}`)
  }

  constructor(name: string, color:string) {
    this.name = name;
    this.color = color;
  }
}

new Golden("金毛","金黄色").action() // 我是金毛,我的颜色是金黄色

Golden 实现了 Dog接口,Dog接口多继承了Creature 和 Animal两个接口,拥有了他们的属性,所以Golden要将他们全部实现。

原文链接:segmentfault.com

上一篇:clss
下一篇:vue 中实现markdown编辑器

相关推荐

  • 面向对象不是银弹,DDD 也不是,TypeScript 才是

    要解决的问题是什么? A problem wellstated is Halfsolved Fred Brooks 在著名的"No Silver Bullet Essence and Acci...

    10 个月前
  • 重读《学习JavaScript数据结构与算法-第三版》-第2章 ECMAScript与TypeScript概述

    定场诗 八月中秋白露,路上行人凄凉; 小桥流水桂花香,日夜千思万想。 心中不得宁静,清早览罢文章, 十年寒苦在书房,方显才高志广。 前言 洛伊安妮·格罗纳女士所著的《学习JavaScr...

    10 个月前
  • 那些鲜为人知的 TypeScript 功能

    原文地址: medium.com/articode/so… 译文地址:github.com/xiaoT/note… 本文版权归原作者所有,翻译仅用于学习。 过去的几年中,TypeScript 已...

    16 天前
  • 通过示例演示 TypeScript 的高级类型

    原文地址: levelup.gitconnected.com/advancedty… 译文地址:github.com/xiaoT/note… 本文版权归原作者所有,翻译仅用于学习。

    23 天前
  • 这次,彻底弄懂接口及抽象类

    LoulanPlan(https://img.javascriptcn.com/74c2e8562152e35142b54b56e367a0ca "LoulanPlan") 作者:伯特 出处:g...

    1 年前
  • 软件需要的接口短信功能有哪些?

    很多软件平台需要进行手机验证,需要收取短信验证码,随着科技的发展,手机短信验证码平台行业的发展迅速,而也有很多用户会恶意攻击短信验证码接口,那么对于手机短信验证码平台接口被恶意攻击,该怎么处理呢? ...

    1 年前
  • 足球特殊指数api接口示例

    分享下足球特殊指数数据,单双、总进球数、半全场赔率api接口示例,详情查看在线文档(https://www.shenlu88.com/doc.html) 接口返回的是Json数据,可以使用fastjs...

    6 个月前
  • 足球冠军指数 api接口示例

    分享下足球冠军指数API数据,接口示例如下,可查看在线文档(https://www.shenlu88.com/doc.... 接口返回的是Json数据,可以使用fastjson来解析 API...

    3 个月前
  • 调用快递鸟单号查询接口Api 查快递

    主要实现功能:根据用户输入的订单号,自动识别根据快递鸟查询快递API接口,实现自动查询的功能。 对接流程 图片描述(https://img.javascriptcn.com/474506d956c0...

    8 个月前
  • 详解Javascript百度地图接口开发文档中的类和方法

    JavaScript API v2.0介绍 百度地图JavaScript API是一套由JavaScript语言编写的应用程序接口,它能够帮助您在网站中构建功能丰富、交互性强的地图应用,包含了构建地...

    3 年前

官方社区

扫码加入 JavaScript 社区