何时在TypeScript/Angular2中使用Interface和Model

Question

我最近使用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数据并绑定到接口/模型.有时我想要一个数据对象,其他时候我想要持有对象的数组.

我应该使用哪一个？为什么？

Answer 1

接口仅在编译时.这样只允许您检查收到的预期数据是否遵循特定结构.为此,您可以将内容转换为此界面:

this.http.get('...')
    .map(res => <Product[]>res.json());

看到这些问题:

• 如何将JSON对象强制转换为typescript类
• 如何从json中获取Date对象在typescript中的响应

您可以使用类来执行类似的操作,但与类的主要区别在于它们存在于运行时(构造函数),您可以使用处理来定义它们中的方法.但是,在这种情况下,您需要实例化对象才能使用它们:

this.http.get('...')
    .map(res => {
      var data = res.json();
      return data.map(d => {
        return new Product(d.productNumber,
          d.productName, d.productDescription);
      });
    });

Answer 2

该接口描述了无论是对一个合同类或新类型.它是一个纯粹的Typescript元素,因此它不会影响Javascript.

模型,即类,是用于生成新对象的实际JS函数.

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

去寻找模型,否则它仍然是Javascript中的JSON.

Answer 3

I personally use interfaces for my models, There hoewver are 3 schools regarding this question, and choosing one is most often based on your requirements:

1- Interfaces:

interface is a virtual structure that only exists within the context of TypeScript. The TypeScript compiler uses interfaces solely for type-checking purposes. Once your code is transpiled to its target language, it will be stripped from its interfaces - JavaScript isn’t typed.

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

Mapping server response to an interface is straight forward if you are using HttpClient from HttpClientModule if you are using Angular 4.3.x and above.

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

when to use interfaces:

• 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- Classes:

A class defines the blueprints of an object. They express the logic, methods, and properties these objects will inherit.

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 = ...;
 }
}

when to use classes:

• You instantiate your class and change the instances state over time.
• Instances of your class will need methods to query or mutate its state
• When you want to associate behaviors with data more closely;
• You enforce constraints on the creation of your instaces.
• If you only write a bunch of properties assignments in your class, you might consider using a type instead.

2- Types:

With the latest versions of typescript, interfaces and types becoming more similar. types do not express logic or state inside your application. It is best to use types when you want to describe some form of information. They can describe varying shapes of data, ranging from simple constructs like strings, arrays, and objects. Like interfaces, types are only virtual structures that don't transpile to any javascript, they just help the compiler making our life easier.

type User = {
 id: number;
 username: string;
}
// inheritance
type UserDetails = User & {
  birthDate :Date;
  biography?:string;
}

when to use types:

• pass it around as concise function parameters
• describe a class constructor parameters
• document small or medium objects coming in or out from an API.
• they don't carry state nor behavior

Answer 4

正如 @ThierryTemplier 所说，从服务器接收数据并在组件之间传输模型（以保留智能感知列表并产生设计时错误），使用接口很好，但我认为将数据发送到服务器（DTO）最好使用类来获取从模型自动映射 DTO 的优点。