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

Question

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

从我的角度来看，我理解这一点：

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

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

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

我是正确的还是我错过了一些关于类和界面的东西？

Answer 1

你是对的。当您只需要类型检查时，接口很棒，而当您不仅需要类型检查，而且需要一些方法或需要一些其他逻辑时，类也很棒。

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

如果我需要一些方法（这意味着我需要class），我会遵循一个典型模式的示例

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);

我永远不会在任何地方注入或需要导入Person，除非我真的需要“结识”一个新人。我总是可以注入 IPerson 来代替，只要作为类传入的内容，接口将允许我调用所有类方法并根据需要访问属性。

但是，有时我不需要方法，但我需要一个数据契约（或者只是想阻止 TypeScript 被激怒，我没有告诉它一切是什么）：

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

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

这样做仍然可以为您提供一种方法来动态创建一个符合接口的变量。但是，当你这样做时没有任何方法（所以你会丢失你的 getFullName 函数并且必须手动运行它）

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

要提出的另一件事是，创建所有这些模型非常耗时。虽然它有回报。在我的一个项目中，我使用 npm 模块根据我的 c# 模型自动生成 TypeScript 接口。这节省了大量的打字时间，并认为这很酷 (https://www.npmjs.com/package/csharp-models-to-typescript)

另一种流行的解决方案是使用Swagger Codegen。你可以'swaggerize'你的后端并让swagger codegen为你生成你的模型和服务。它很光滑。 Here's an example repo 使用 Angular 和 C# 作为后端。

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

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

Answer 2

由于您还在问题中标记了 Angular，我想从 Angular 的角度补充答案。

Angular 在通过 http 检索数据时也使用接口（或类）作为结构。

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 方法获取数据并填充提供的product 数组结构。这使得处理来自组件的数据更加更容易。