在TypeScript / Angular中什么时候使用Interface和Model

我最近看了一个关于使用TypeScript的Angular 2教程，但不确定什么时候用接口，什么时候用模型来处理数据结构。

接口示例:

export interface IProduct {
    ProductNumber: number;
    ProductName: string;
    ProductDescription: string;
}

模型示例:

export class Product {
    constructor(
        public ProductNumber: number,
        public ProductName: string,
        public ProductDescription: string
    ){}
}

我想从URL加载JSON数据并绑定到接口/模型。有时我想要单个数据对象，有时我想保存对象的数组。

我应该使用哪一个，为什么?

当前回答

使用类而不是接口，这是我在所有研究后发现的。

为什么?单独的类比类加接口的代码要少。(无论如何，你可能需要一个类的数据模型)

为什么?类可以充当接口(使用实现而不是扩展)。

为什么?在Angular依赖注入中，接口类可以是提供者查找令牌。

来自Angular Style Guide

基本上，一个类可以做接口能做的所有事情。所以可能永远不需要使用接口。

2018-03-12 09:33:36

其他回答

正如@ThierryTemplier所说，从服务器接收数据，并在组件之间传输模型(以保持智能感知列表并使设计时错误)，使用接口是可以的，但我认为对于向服务器发送数据(DTO)，最好使用类来利用从模型自动映射DTO的优势。

2018-05-11 08:36:14

使用类而不是接口，这是我在所有研究后发现的。

为什么?单独的类比类加接口的代码要少。(无论如何，你可能需要一个类的数据模型)

为什么?类可以充当接口(使用实现而不是扩展)。

为什么?在Angular依赖注入中，接口类可以是提供者查找令牌。

来自Angular Style Guide

基本上，一个类可以做接口能做的所有事情。所以可能永远不需要使用接口。

2018-03-12 09:33:36

我个人在我的模型中使用接口，但是关于这个问题有3个学派，选择一个最常见的是基于你的需求:

1 -接口:

interface是一个只存在于TypeScript上下文中的虚拟结构。TypeScript编译器使用接口仅仅是为了进行类型检查。一旦你的代码被转译为目标语言，它就会从接口中剥离出来——JavaScript没有类型。

interface User {
 id: number;
 username: string;
}
// inheritance
interface UserDetails extends User {
 birthdate: Date;
 biography?: string;  // use the '?' annotation to mark this property as optionnal
}

如果你使用的是Angular 4.3中的HttpClient和HttpClientModule，那么映射服务器到接口的响应就很简单了。X及以上。

getUsers() :Observable<User[]> {
 return this.http.get<User[]>(url); // no need for '.map((res: Response) => res.json())' 
}

何时使用接口:

You only need the definition for the server data without introducing additional overhead for the final output. You only need to transmit data without any behaviors or logic (constructor initialization, methods) You do not instantiate/create objects from your interface very often Using simple object-literal notationlet instance: FooInterface = { ... };, you risk having semi-instances all over the place. That doesn't enforce the constraints given by a class ( constructor or initialization logic, validation, encapsulation of private fields...Etc) You need to define contracts/configurations for your systems (global configurations)

2 -类:

类定义对象的蓝图。它们表示这些对象将继承的逻辑、方法和属性。

class User {
 id: number;
 username: string;
 constructor(id :number, username: string)  {
  this.id = id;
  this.username = username.replace(/^\s+|\s+$/g, ''); // trim whitespaces and new lines
 }
}
// inheritance
class UserDetails extends User {
 birthdate: Date;
 biography?: string;  
 constructor(id :number, username: string, birthdate:Date, biography? :string )  {
   super(id,username);
  this.birthdate = ...;
 }
}

何时使用类:

您实例化您的类，并随着时间的推移更改实例状态。类的实例需要一些方法来查询或改变它的状态当你想将行为与数据更紧密地联系起来时; 在创建实例时强制执行约束。如果您在类中只编写了一堆属性赋值，则可以考虑使用类型。

2 -类型:

随着typescript的最新版本，接口和类型变得越来越相似。类型不表示应用程序内部的逻辑或状态。当您想要描述某种形式的信息时，最好使用类型。它们可以描述不同形状的数据，从简单的结构，如字符串、数组和对象。和接口一样，类型只是虚拟结构，不能编译成任何javascript，它们只是帮助编译器使我们的工作更简单。

type FamilySituation = 'single' | 'married' | 'divorced' | 'widow' ;...
type User = {
 id: number;
 username: string;
}
// inheritance
type UserDetails = User & {
  birthDate: Date;
  familySituation: FamilySituation ;
}

何时使用类型:

将其作为简洁的函数参数传递描述一个类构造函数参数记录从API输入或输出的小型或中型对象。它们不代表状态和行为

2021-02-12 01:01:10

接口描述了类的契约或新类型。它是一个纯Typescript元素，所以它不会影响Javascript。

一个模型，也就是一个类，是一个实际的用来生成新对象的JS函数。

我想从URL加载JSON数据并绑定到接口/模型。

选择一个模型，否则它在Javascript中仍然是JSON。

2016-06-06 08:42:29

为了使代码更加灵活，我们需要使用接口。创建接口并在类的构造函数中传递接口类型。它使用依赖注入。

好处:

如果接口的参数有变化，则不需要改变类。 2.为了进行测试，可以在类的构造函数中使用模拟数据。

2021-07-03 10:18:59