如何在 Angular 的接口中定义函数？答案

【问题标题】：How to define a function in an interface in Angular?如何在 Angular 的接口中定义函数？
【发布时间】：2021-01-27 14:46:00
【问题描述】：

我有以下问题，但我没有找到有效的解决方案。我的 Angular 应用程序中有一个接口：

export interface Person {
    forename: string;
    surname: string;
}

我将如何定义一个名为 getFullName() 的函数，实现如下：

getFullName(){
  return this.forename + " " + this.surname;
}

我直接在界面中以函数为key试了下，还是不行……

【问题讨论】：

接口不能有实现，只能声明这种方法的存在 (getFullName(): string)。为了实现，你需要一个类。
@jonrsharpe 那么如果我有一个接口，如果我的接口中有一个函数签名，我就必须为该接口生成一个类？那我为什么要接口呢？那么，如果你有函数，类会是一个更好的主意吗？
您只能在实现中拥有实际功能，无论是基于类还是其他方式，而不是接口。发出的 JS 中不存在接口，因此不能有实现。
我想我明白了，接口就像一个抽象类。
不，明确不："Unlike an interface, an abstract class may contain implementation details for its members."

标签： javascript angular typescript class interface

【解决方案1】：

您可以使用函数签名() => string 来表示一个接受 0 个参数并返回一个字符串的函数。

export interface Person {
    forename: string;
    surname: string;
    getFullName: () => string;
}

你不能在接口中定义实现。

要创建实现接口的类，您可以执行以下操作：

class MyPerson implements Person {
  constructor(public forename: string, public surname: string) { }
 
  getFullName() {
    return this.forename + " " + this.surname;
  } 
}

在这种情况下，您可能不需要接口 Person - 相反，您可以使用类。

【讨论】：

我应该把实现放在哪里？
@Opat 已更新。您应该使用一个接口来声明对象属于某种类型，因此可以以某种方式使用。例如 - 如果您有几个具有 Person 属性的不同类实现（例如学生、教师）。如果你只是想创建人对象，那么就不要介意界面。
啊，我想我现在明白了。接口就像一个抽象类，还是我错了？
这是一个类似的概念。关键区别通常是接口不包含实现，您可以实现多个接口（通常抽象类可以包含实现，一个类只能扩展一个抽象类）。虽然这些不是每种语言的具体规则 - 但它们适用于 TypeScript。关于抽象类与接口的资源有很多，所以我不会在这里重新讨论它们，而是在 google 上查看一些更好的解释。