如何在 TypeScript 中扩展接口

摘要：在本教程中，你将学习如何扩展接口，以便将一个接口的属性和方法复制到另一个接口。

扩展一个接口的接口

假设你有一个名为 Mailable 的接口，其中包含两个名为 send() 和 queue() 的方法，如下所示：

interface Mailable {
    send(email: string): boolean
    queue(email: string): boolean
}

并且有许多已经实现了 Mailable 接口的类。

现在，你想要向 Mailable 接口添加一个新方法，以便稍后发送电子邮件，如下所示：

later(email: string, after: number): void

但是，将 later() 方法添加到 Mailable 接口会破坏当前代码。

为了避免这种情况，你可以创建一个扩展 Mailable 接口的新接口：

interface FutureMailable extends Mailable {
    later(email: string, after: number): boolean
}

要扩展接口，请使用带有以下语法的 extends 关键字：

interface A {
    a(): void
}

interface B extends A {
    b(): void
}

接口 B 扩展了接口 A，后者具有方法 a() 和 b() 。

与类一样，FutureMailable 接口继承了 Mailable 接口的 send() 和 queue() 方法。

下面展示了如何实现 FutureMailable 接口：

class Mail implements FutureMailable {
    later(email: string, after: number): boolean {
        console.log(`Send email to ${email} in ${after} ms.`);
        return true;
    }
    send(email: string): boolean {
        console.log(`Sent email to ${email} after ${after} ms. `);
        return true;
    }
    queue(email: string): boolean {
        console.log(`Queue an email to ${email}.`);
        return true;
    }
}

接口扩展多个接口

一个接口可以扩展多个接口，从而创建所有接口的组合。 例如：

interface C {
    c(): void
}

interface D extends B, C {
    d(): void
}

在这个例子中，接口 D 扩展了接口 B 和 C。因此 D 具有 B 和 C 接口的所有方法，即 a() 、b() 和 c() 方法。

接口扩展类

TypeScript 允许接口扩展类。 在这种情况下，接口继承了类的属性和方法。 此外，接口可以继承类的私有成员和受保护成员，而不仅仅是公共成员。

这意味着当接口扩展具有私有或受保护成员的类时，该接口只能由该接口扩展的类或该类的子类实现。

通过这样做，你可以将接口的使用限制为仅该接口所扩展的类或该类的子类。 如果尝试从不是该接口继承的类的子类的类实现该接口，将收到错误。 例如：

class Control {
    private state: boolean;
}

interface StatefulControl extends Control {
    enable(): void
}

class Button extends Control implements StatefulControl {
    enable() { }
}
class TextBox extends Control implements StatefulControl {
    enable() { }
}
class Label extends Control { }


// Error: cannot implement
class Chart implements StatefulControl {
    enable() { }

}

概括

• 一个接口可以扩展一个或多个现有接口。
• 接口也可以扩展类。 如果类包含私有或受保护成员，则该接口只能由该类或该类的子类实现。