web-dev-qa-db-ja.com

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

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データをロードして、インターフェース/モデルにバインドしたいです。いつか私は単一のデータオブジェクトが欲しいのですが、他の時はオブジェクトの保持と配列が欲しいのです。

どちらを使用すればよいですか、またその理由は何ですか。

angulartypescript
152
I_LIKE_FOO

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

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

これらの質問を参照してください。

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

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

Interface はclassまたは新しいtypeのどちらかの規約を記述します。これは純粋なTypeScript要素なので、Javascriptには影響しません。

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

私はURLからJSONデータをロードして、インターフェース/モデルにバインドしたいです。

モデルを選択してください。そうでなければ、それはまだあなたのJavascriptではJSONです。

36
pietro909

@ThierryTemplierがサーバーからデータを受信し、コンポーネント間でモデルを転送する（インテリセンスリストを維持し、デザイン時のエラーを作成する）ために言ったように、インターフェースを使用するのは問題ありません。モデルからDTOを自動マッピングする利点。

3
M.Farahmand