1. ホーム
  2. アンギュラー

[解決済み】TypeScript / AngularでInterfaceとModelを使い分けるタイミングについて

2022-04-20 08:53:12

質問

最近、Angular 2 with TypeScriptのチュートリアルを見ましたが、データ構造にいつInterfaceを使用し、いつModelを使用するのかがわかりません。

インターフェースの例です。

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

モデルの例です。

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

URLからJSONデータを読み込んで、Interface/Modelにバインドしたい。あるときは単一のデータオブジェクトを、またあるときはオブジェクトの配列を保持したい。

どちらを使うべきですか?

解決方法は?

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

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

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

クラスでも似たようなことはできますが、クラスとの主な違いは、実行時に存在すること(コンストラクタ関数)と、処理によってその中にメソッドを定義できることです。しかし、この場合、オブジェクトをインスタンス化しないと使えない。

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