Verwendung von Schnittstelle und Modell in TypeScript / Angular2

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

Beispiel einer Schnittstelle:

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

Beispiel eines 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 soll ich verwenden und warum?

Schnittstellen sind nur zur Kompilierungszeit. Auf diese Weise können nur Sie überprüfen, ob die erwarteten empfangenen Daten einer bestimmten Struktur folgen. Dazu können Sie Ihre Inhalte auf diese Oberfläche übertragen:

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

Siehe diese Fragen:

• Wie wandle ich ein JSON-Objekt in eine Typoskriptklasse um?
• So erhalten Sie ein Date-Objekt von json Response in Typoskript

Sie können mit class etwas Ähnliches tun, aber die Hauptunterschiede mit class bestehen darin, dass sie zur Laufzeit vorhanden sind (Konstruktorfunktion) und Sie können darin Methoden mit der Verarbeitung 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);
      });
    });

Die Schnittstelle beschreibt entweder einen Vertrag für eine Klasse oder einen neuen Typ . Es ist ein reines Typescript-Element, daher wirkt es sich nicht auf Javascript aus.

Ein Modell und nämlich eine Klasse ist eine tatsächliche JS-Funktion, mit der neue Objekte generiert werden.

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.

Wie @ThierryTemplier sagte, um Daten vom Server zu empfangen und auch Modelle zwischen Komponenten zu übertragen (um die Intellisense-Liste zu führen und Entwurfszeitfehler zu machen), ist es in Ordnung, die Schnittstelle zu verwenden, aber ich denke, für das Senden von Daten an den Server (DTOs) ist es besser, die Klasse zu verwenden Vorteile der automatischen Zuordnung von DTO vom Modell.

Verwenden Sie Klasse anstelle von Schnittstelle , was ich nach all meinen Nachforschungen entdeckt habe.

Warum? Eine Klasse allein ist weniger Code als eine Klasse-plus-Schnittstelle. (Auf jeden Fall benötigen Sie möglicherweise eine Klasse für das Datenmodell.)

Warum? Eine Klasse kann als Schnittstelle fungieren (verwenden Sie Implementierungen anstelle von Erweiterungen).

Warum? Eine Schnittstellenklasse kann ein Provider-Lookup-Token in Angular Dependency Injection sein.

von Angular Style Guide

Grundsätzlich kann eine Klasse alles, was eine Schnittstelle kann. Daher muss möglicherweise nie eine Schnittstelle verwendet werden .