在Angular项目中何时使用类或接口？[关闭]

Question

我今天在这里是因为我有一个问题，就像标题所说的，关于Angular中的类和接口。

在我看来，我理解这一点：

接口在Typescript中用于执行类型检查，它们一直在这里，直到发生转换并在生产中消失。此外，接口不能用于实例化。

来自ES6的类也用于类型检查，但它们会在转换后保留，并在生产中生成代码。此外，它们还用于实例化。

所以，基本上，若我们在生产中不需要它们，若我们只需要进行类型检查，那个么接口是有用的。相反，如果我们在生产中需要类，特别是在实例化中，类就在这里。

我是对的，还是我遗漏了一些关于类和接口的内容？

Answer 1

因为你在问题中也标记了Angular，所以我想从Angular的角度来补充答案。

Angular还使用Interface（或类）作为通过超文本传输协议检索数据的结构。

export interface Product {
  id: number;
  productName: string;
  productCode: string;
  tags?: string[];
  price: number;
  description: string;
  imageUrl: string;
}

@Injectable({ providedIn: 'root' })
export class ProductService {
  private productsUrl = 'api/products';

  constructor(private http: HttpClient) { }

  getProducts(): Observable<Product[]> {
    return this.http.get<Product[]>(this.productsUrl);
  }
}

http。get方法获取数据并填充提供的产品数组结构。这使得处理来自组件的数据变得更加容易。

Answer 2

你是对的。当您只需要类型检查时，接口非常好，而当您不仅需要类型检查，还需要一些方法或需要一些其他逻辑时，类非常好。

就我个人而言，我总是从仅仅使用一个接口开始，一旦我需要一些方法，我会添加一个类并继承这个接口。我还想补充一点，无论您是否使用类，我都希望始终拥有一个接口。这允许您传递/注入接口，而不必多次重新实例化类。

下面是一个典型模式的例子，如果我需要一些方法（这意味着我需要一个类）

interface IPerson {
    firstName: string;
    lastName: string;
    age: number;
    getFullName(): string;
}
class Person implements IPerson {
    public firstName: string;
    public lastName: string;
    public age: number;
    constructor(firstName: string, lastName: string, age: number) {
        this.firstName = firstName;
        this.lastName = lastName;
        this.age = age;
    }
    getFullName(): string {
        return `${this.firstName} ${this.lastName}`
    }
}

const person: IPerson = new Person('John', 'Doe', 44);

我永远不会在任何地方注射或导入人，除非我真的需要“更新”一个新人。我总是可以注入IPerson，只要传入的是类，接口就会允许我调用所有类方法并访问属性。

然而，有时我不需要方法，但我需要一个数据契约（或者只是想抑制TypeScript生气，我不告诉它一切是什么）：

interface IPerson {
    firstName: string;
    lastName: string;
    age: number;
}

const person: IPerson = <IPerson>{
    firstName: 'John',
    lastName: 'Doe',
    age: 44
};

这样做仍然可以让您快速创建粘附到接口的变量。然而，当你这样做的时候没有方法（所以你失去了你的getFullName函数，必须手动运行）

总的来说，我发现自己在http返回上使用的是结构化json接口。我真的不需要在前端对他们做更多的事情，因为后端已经为我完成了繁重的工作。因此，为这些回报中的每一个创建一个类可能有些过分，但有些人更喜欢这样。

还有一件事要提的是，创建所有这些模型非常耗时。不过，这是值得的。在我的一个项目中，我使用npm模块根据我的c#模型自动生成TypeScript接口。这节省了大量的打字时间，而且觉得这很酷(https://www.npmjs.com/package/csharp-models-to-typescript)

另一个流行的解决方案是使用Swagger Codegen。你可以“大摇大摆”你的后端，让大摇大摆的codegen为你生成模型和服务。它很光滑。下面是一个使用Angular和C#作为后端的回购示例。

一般来说，这确实是你的偏好。请记住，如果您需要方法和额外的层来构建给定的模型，那么类是最好的。如果您只需要类型，而不关心其他奇特的“语法糖”，只需使用接口即可。正如您所提到的，接口在生产中消失了，所以这当然是一个优势。

https://jsfiddle.net/mswilson4040/3vznkbq0/7/