TypeScript interface 类类型 继承接口

2019-10-23 admin

类实现接口

一个类实现一个接口,与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要将他们全部实现。

[转载]原文链接:https://segmentfault.com/a/1190000020776301

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-78066.html

文章标题:TypeScript interface 类类型 继承接口

相关文章
JavaScript实现基于Cookie的存储类实例
本文实例讲述了JavaScript实现基于Cookie的存储类。分享给大家供大家参考。具体分析如下: 通过这个JS类,你可以象使用session一样使用cookie,非常简单了! /* * CookieStorage.js *...
2017-03-22
javascript框架设计之类工厂
类与继承在javascript的出现,说明javascript已经达到大规模开发的门槛了,在之前是ECMAScript4,就试图引入类,模块等东西,但由于过分引入太多的特性,搞得javascript乌烟瘴气,导致被否决。不过只是把类延时到E...
2017-03-24
当 Egg.js 遇上 Typescript
# 前言 TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. TypeScript 的静态类型检查,智能提示,IDE 友好性等特...
2018-04-14
JavaScript数据类型判定的总结笔记
用typeof 来检测数据类型 Javascript自带两套类型:基本数据类型(undefined,string,null,boolean,function,object)和对象类型。 但是如果尝试用typeof 来检测对象类型都一律返回&...
2017-03-27
javascript获取本机操作系统类型的方法
废话不多说了,下面通过一段代码示例介绍一下,希望能够给需要的朋友带来或多或少的帮助。 示例代码: function GetOSInfo() { var _pf=navigator.platform; var appVer=navig...
2017-03-29
JavaScript中数组继承的简单示例
在写一些库时经常会用到树结构的数据,而且一些树形结构的数据对从根到叶的路径获取需求非常高。比如一个站点的整个路由表就是一棵这样的树,它的「路径」实际上就是 URL 中的 path 部分。所以我好几次都用了丧心病狂的数组继承去实现,下面给大家...
2017-03-27
js实现类似jquery里animate动画效果的方法
本文实例讲述了js实现类似jquery里animate动画效果的方法。分享给大家供大家参考。具体分析如下: 该实例可实现鼠标移上,先宽度变化,再高度变化,最后透明度变化,鼠标移出,再依次变回去的效果。 要点一: startrun(obj,a...
2017-03-22
js实现类似新浪微博首页内容渐显效果的方法
本文实例讲述了js实现类似新浪微博首页内容渐显效果的方法。分享给大家供大家参考。具体分析如下: 要点一: if(list_li.length>=1){ list.insertBefore(li,list_li[0]); }else{ ...
2017-03-22
js实现类似MSN提示的页面效果代码分享
这是一篇基于javascript实现了模仿MSN消息提示的效果,推荐给大家,感兴趣的小伙伴们可以参考一下。 为大家分享的模仿MSN消息提示的效果代码如下 <html> <head> <meta http-e...
2017-03-29
JavaScript字符串常用类使用方法汇总
获取类: 1)动态方法: charAt : 获取字符串指定位置上的字符。(参数:一个,指定要获取的字符位置) 1,不接受负数,如果为负数,会返回一个空字符串。 2,如果不给参数,默认是获取第0位置上的字符。 3,只接收一个参数。 charC...
2017-03-22
回到顶部