TypeScript 中的 implements 和 extends

类和接口

关于类

在理解类和接口的关系之前，先看一段代码：

class Point {
    x: number;
    y: number;
    constructor(x: number, y: number) {
        this.x = x;
        this.y = y;
    }
}

interface Point3d extends Point {
    z: number;
}

let point3d: Point3d = {x: 1, y: 2, z: 3};

上述代码在声明 class Point 时，除了会创建一个名为 Point 的类之外，同时也创建了一个名为 Point 的类型（实例的类型）。

所以既可以将 Point 当做一个类来用， 也可以将 Point 当做一个类型来用。

class Point {
    x: number;
    y: number;
    constructor(x: number, y: number) {
        this.x = x;
        this.y = y;
    }
}

//作为类使用
const p = new Point(1, 2); 

//作为类型使用
function printPoint(p: Point) {
    console.log(p.x, p.y);
}
printPoint(new Point(1, 2));

这个例子等价于：

class Point {
    x: number;
    y: number;
    constructor(x: number, y: number) {
        this.x = x;
        this.y = y;
    }
}

// TS偷偷做的事情 ----
interface PointInstanceType {
    x: number;
    y: number;
}
// ------/

//作为类使用
const p = new Point(1, 2); 

//作为类型使用
function printPoint(p: PointInstanceType ) {
    console.log(p.x, p.y);
}
printPoint(new Point(1, 2));

换句话说，「接口继承类」和「接口继承接口」没有什么本质的区别。

extends（继承）和 implements（实现）

因为类可以作为接口使用，或者说因为类同时实现了接口，所以 TypeScript 中可以有如下关系：

• 类继承类
• 接口继承接口/类
• 类实现接口/类

参考链接

https://ts.xcatliu.com/advanced/class-and-interfaces.html
https://www.cnblogs.com/pangjianxin/p/10901115.html