TypeScript / Angular2でインターフェースとモデルを使用する場合

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データを読み込み、インターフェース/モデルにバインドしたいのですが。単一のデータオブジェクトが必要な場合もあれば、オブジェクトの配列や配列を保持したい場合もあります。

どちらを使用する必要がありますか？その理由は？

インターフェイスはコンパイル時のみです。これにより、受信した期待されるデータが特定の構造に従っていることを確認することだけが可能になります。このため、コンテンツをこのインターフェイスにキャストできます。

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

次の質問をご覧ください。

• JSONオブジェクトをtypescriptクラスにキャストする方法
• typescriptでJSON応答から日付オブジェクトを取得する方法

クラスでも同様のことができますが、クラスとの主な違いは、実行時に存在し（コンストラクター関数）、処理を使用してメソッドを定義できることです。ただし、この場合は、オブジェクトをインスタンス化して使用できるようにする必要があります。

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

インターフェイスは、契約のいずれかを説明したクラスや新しいタイプを。これは純粋なTypescript要素なので、Javascriptには影響しません。

モデル、つまりクラスは、新しいオブジェクトを生成するために使用されている実際のJS関数です。

URLからJSONデータを読み込み、インターフェース/モデルにバインドしたいのですが。

モデルに移動します。それ以外の場合は、JavaScriptのJSONのままです。

@ThierryTemplierがサーバーからデータを受信し、コンポーネント間でモデルを送信する（インテリセンスリストを保持し、設計時エラーを発生させる）と述べたように、インターフェイスを使用することは問題ありませんが、サーバー（DTO）にデータを送信する場合は、クラスを使用することをお勧めしますモデルからDTOを自動マッピングする利点。

すべての調査の結果、私が発見したインターフェイスの代わりにクラスを使用します。

どうして？クラスだけでは、クラスプラスインターフェースよりもコードが少なくなります。（とにかく、データモデルのクラスが必要になる場合があります）

どうして？クラスはインターフェースとして機能できます（拡張の代わりに実装を使用）。

どうして？インターフェイスクラスは、Angular依存関係注入のプロバイダールックアップトークンにすることができます。

Angular Style Guideより

基本的に、クラスはすべてのことを実行できます。したがって、インターフェイスを使用する必要はないかもしれません。