如何在 TypeScript 中扩展接口

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

扩展一个接口的接口

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

interface Mailable {
    send(email: string): boolean
    queue(email: string): boolean
}Code language: TypeScript (typescript)

并且您有很多已经实现 Mailable 接口的类。

现在，您想在 Mailable 接口中添加一个新方法，该方法稍后发送电子邮件，如下所示

later(email: string, after: number): voidCode language: TypeScript (typescript)

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

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

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

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

interface A {
    a(): void
}

interface B extends A {
    b(): void
}
Code language: TypeScript (typescript)

接口 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;
    }
}Code language: TypeScript (typescript)

扩展多个接口的接口

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

interface C {
    c(): void
}

interface D extends B, C {
    d(): void
}
Code language: TypeScript (typescript)

在此示例中，接口 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() { }

}Code language: PHP (php)

总结

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