it-swarm.com.de

Verwendung von Interface und Model in TypeScript / Angular2

Ich habe mir kürzlich ein Tutorial zu Angular 2 mit TypeScript angesehen, bin mir jedoch nicht sicher, wann ich eine Schnittstelle und wann ich ein Modell zum Speichern von Datenstrukturen verwenden soll.

Beispiel für eine Schnittstelle:

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

Beispiel des Modells:

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

Ich möchte JSON-Daten von einer URL laden und an die Schnittstelle/das Modell binden. Manchmal möchte ich ein einzelnes Datenobjekt, ein anderes Mal möchte ich ein Array des Objekts halten.

Welches sollte ich verwenden und warum?

165
I_LIKE_FOO

Schnittstellen sind nur zur Kompilierungszeit vorhanden. Auf diese Weise können nur Sie überprüfen, ob die erwarteten empfangenen Daten einer bestimmten Struktur entsprechen. Hierfür können Sie Ihre Inhalte in diese Oberfläche umwandeln:

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

Siehe diese Fragen:

Sie können etwas Ähnliches mit class tun, aber die Hauptunterschiede zu class bestehen darin, dass sie zur Laufzeit vorhanden sind (Konstruktorfunktion) und Sie können Methoden in ihnen mit processing definieren. In diesem Fall müssen Sie jedoch Objekte instanziieren, um sie verwenden zu können:

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

Das Interface beschreibt entweder einen Vertrag für eine Klasse oder einen neuen Typ . Es ist ein reines TypeScript-Element, daher hat es keinen Einfluss auf Javascript.

Ein Modell, und zwar eine Klasse , ist eine tatsächliche JS-Funktion, die zum Erzeugen neuer Objekte verwendet wird.

Ich möchte JSON-Daten von einer URL laden und an die Schnittstelle/das Modell binden.

Entscheide dich für ein Modell, sonst ist es immer noch JSON in deinem Javascript.

37
pietro909

Wie @ThierryTemplier für das Empfangen von Daten vom Server und das Übertragen des Modells zwischen Komponenten sagte (um die Liste der Intellisense-Funktionen zu erhalten und Fehler bei der Entwurfszeit zu machen), ist es in Ordnung, die Schnittstelle zu verwenden Vorteile der automatischen Zuordnung von DTO vom Modell.

3
M.Farahmand