TypeScript 在类中实现接口

Question

我是 TypeScript 的新手，谁能帮我找出在课堂上实现接口的最佳实践？因为当我尝试关注 Docs (Class Heritage) 时，我遇到了这样的问题：

1. 声明接口

interface Notification {
    message: string;
    send(msg?: string): void;
}

1. 用constructor()在类中实现接口

class Notifier implements Notification {
    constructor(
        public message: string,
    ){}

    send(customMsg?: string): void {
        if (customMsg) {
            console.log(customMsg);
        } else {
            console.log(this.message);
        }
    }
}

1. 示例，使用类

const hello = new Notifier("hello");
hello.send();
hello.send("Alert!");

不幸的是，我发现了如下错误消息：

“通知程序”类错误地实现了“通知”接口。 “通知程序”类型缺少“通知”类型的以下属性：操作、徽章、正文、数据等 19 个。

谁能告诉我我的问题是什么？提前致谢！

Answer 1

您的问题是the TypeScript standard library already includes a globally-scoped interface named Notification 对应于Web Workers API 中的Notification interface。因此，您的 Notification interface 定义就是 merging additional members into it。这显然不是你想要的。

这里的解决方法是将您的 interface 重命名为 MyNotification 之类的其他名称，或者创建一个 module 或 namespace 来为您的代码创建一个新的命名范围：

// use of "export" makes your code a module
export interface Notification { 
    message: string;
    send(msg?: string): void;
}

或

namespace MyNamespace {
  export interface Notification {
    message: string;
    send(msg?: string): void;
  }
}

然后您应该可以稍后参考它。如果你使用namespace 方法，你会得到这个：

class Notifier implements MyNamespace.Notification {
  constructor(
    public message: string, 
  ) { }

  send(customMsg?: string): void {
    if (customMsg) {
      console.log(customMsg);
    } else {
      console.log(this.message);
    }
  }
}


const hello = new Notifier("hello");
hello.send();
hello.send("Alert!");

根据需要工作。

Playground link to code