从 0 开始的 TypeScriptの九：接口 Interfaces · 中

空城机

关注

发布于: 1 小时前

接口 Interfaces （中篇）

在上一次的《从0开始的TypeScriptの四：接口Interfaces · 上》文章中，已经把typescript的接口基本使用说完了（我自己如果有遗忘也会重新去看看，毕竟温故而知新）

函数与接口

接口能够描述 JavaScript 中对象拥有的各种各样的外形。除了描述带有属性的普通对象外，接口也可以描述函数类型。

为了使用接口表示函数类型，我们需要给接口定义一个调用签名。它就像是一个只有参数列表和返回值类型的函数定义。参数列表里的每个参数都需要名字和类型。

下面的例子：把接口定义给函数 md0，这样函数 md0 的参数和返回值就需要和接口定义的类型相同了

interface encrypt {    (key: string, value: string): string;}let md0:encrypt = function(key: string, value: string):string {    return key + value;}

复制代码

类继承接口

TypeScript 也能够用接口来明确的强制一个类去符合某种契约，与上一篇文章《从0开始的TypeScriptの八：类》中的抽象类概念有些相似，都是对类进行约束

类如果是继承父类，使用extends。但是如果是接受接口的约束，就使用implements关键字（让我想起了学 Java 的时候）

下面是一个简单的类继承接口的例子：

interface TennisRules {    server: string;    catchball(score: number): void;}class Tennis implements TennisRules {    server: string;    constructor(server: string) {        this.server = server;    }    catchball(score: number) {        console.log(`由发球者${this.server}发出的球，获得的接球分数为：${score}分`);    }}let ten1 = new Tennis('张三');
ten1.catchball(9); // 由发球者张三发出的球，获得的接球分数为：9分

复制代码

这样一看好像声明一个像下面的一样的类，然后继承也同样可以实现：

class TennisRules2 {    server: string;    constructor(server: string) {        this.server = server;    }    catchball(score: number) {}}

复制代码

实际上这两者虽然相似，但是还是有区别的。

类与接口区别：

接口继承类

当然不仅类可以继承接口，反过来，接口也可以继承类

当接口继承了一个类类型时，它会继承类的成员但不包括其实现。

定义一个 Money 类：

class Money {    facevalue: number;    constructor(facevalue: number) {        this.facevalue = facevalue;    }    buy():void {        console.log('买东西');    }}

复制代码

接口继承类，并使用。其中的属性可以使用，但是 buy 方法不行

// 接口继承类interface dollar extends Money {    size: number}
let dollar_one = {size: 10, facevalue: 100} as dollar;console.log(dollar_one.facevalue);  // 100console.log(dollar_one.size);   // 10
dollar_one.buy();  // 虽然编译无报错，但是无法使用 dollar_one.buy is not a function

复制代码

接口继承接口

和类一样，接口也可以相互继承。这让我们能够从一个接口里复制成员到另一个接口里，可以更灵活地将接口分割到可重用的模块里。

一个接口可以继承多个接口，创建出多个接口的合成接口。可以使用extends去完成接口继承接口的操作

例子：

interface ShapeColor {    color: string;}
interface ShapeHeight {    height: number}
// 一个接口可以继承多个接口，创建出多个接口的合成接口interface Square extends ShapeColor, ShapeHeight {    width: number;}let square = {} as Square;square.color = '#f00';square.width = 30;square.height = 50;console.log(square);

复制代码

每天学习一点内容，虽然从成长的角度来说有点慢，但是总比不学习不成长要好，冲冲冲！

发布于: 1 小时前阅读数: 3

原文链接:【http://xie.infoq.cn/article/c5960d4a807fa8460179025b9】。

空城机

关注

曾经沧海难为水,只是当时已惘然 2021.03.22 加入

业余作者，在线水文主要干前端的活，业余会学学python 欢迎各位关注，互相学习，互相进步

发布

暂无评论

创作场景

从 0 开始的 TypeScriptの九：接口 Interfaces · 中

接口 Interfaces （中篇）

函数与接口

类继承接口

接口继承类

接口继承接口

空城机

评论