Kiedy używać interfejsu i modelu w maszynopisie / Angular2

Ostatnio oglądałem samouczek na Angular 2 z maszynopisem, ale nie wiem, kiedy używać interfejsu, a kiedy używać modelu do przechowywania struktur danych.

Przykład interfejsu: 

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

Przykład Modelu: 

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

Chcę załadować dane JSON z adresu URL i powiązać z interfejsem / modelem. Czasami chcę pojedynczy obiekt danych, innym razem chcę trzymać i tablicę obiektu.

Którego z nich powinienem użyć i dlaczego?

Author: developer033, 2016-06-06
Source

4 answers

Interfejsy są tylko w czasie kompilacji. Pozwala to tylko na sprawdzenie, czy oczekiwane dane otrzymane są zgodne z określoną strukturą. W tym celu możesz przesłać treść do tego interfejsu: 

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

Zobacz te pytania:

Można zrobić coś podobnego z klasą, ale główne różnice z klasą są takie, że są obecne w runtime (funkcja konstruktora) i można w nich definiować metody z przetwarzaniem. Ale w tym przypadku musisz utworzyć instancję obiektów, aby móc z nich korzystać: 

this.http.get('...')
    .map(res => {
      var data = res.json();
      return data.map(d => {
        return new Product(d.productNumber,
          d.productName, d.productDescription);
      });
    });
 87
Author: Thierry Templier,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:02:48

Interfejs opisuje kontrakt dla klasy lub nowego typu . Jest to czysty element Typescript, więc nie wpływa na Javascript.

Model, a mianowicie klasa , jest rzeczywistą funkcją JS, która jest używana do generowania nowych obiektów.

Chcę załadować dane JSON z adresu URL i powiązać z interfejsem / modelem.

Wybierz model, w przeciwnym razie nadal będzie to JSON w Twoim Javascript.

 29
Author: pietro909,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-06-06 08:42:29

Jak powiedział @ThierryTemplier do odbierania danych z serwera, a także przesyłania modelu między komponentami (aby zachować listę intellisense i popełnić błąd czasu projektowania), dobrze jest używać interfejsu, ale myślę, że do wysyłania danych do serwera (DTOs) lepiej użyć klasy, aby skorzystać z zalet automatycznego mapowania DTO z modelu.

 2
Author: M.Farahmand,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-05-11 08:36:14

Używaj klasy zamiast interfejsu to właśnie odkryłem po wszystkich moich badaniach.

Dlaczego? Sama klasa to mniej kodu niż interfejs klasy Plus. (w każdym razie możesz wymagać klasy dla modelu danych)

Dlaczego? Klasa może działać jako interfejs (używać implementacji zamiast rozszerzeń).

Dlaczego? Klasa interfejsu może być tokenem wyszukiwania dostawcy w Angular dependency injection.

Od Angular Style Guide

W zasadzie klasa może zrobić wszystko, co Interfejs wystarczy. więc może nigdy nie trzeba używać interfejsu .

 -3
Author: Sajith Mantharath,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-03-12 09:33:36