[解決済み】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);
});
});
関連
-
[解決済み】Typescriptで、! (エクスクラメーションマーク/バン)演算子でメンバを再参照するのは?
-
[解決済み] ionInputとionChangeで有意差あり
-
[解決済み] 安全でない値」の例外を発生させずに <iframe src="..."> を設定するにはどうしたらよいですか?
-
[解決済み] Angularアプリのシンタックスエラー。予期しないトークン <
-
[解決済み] どのような場合に '$this' よりも 'self' を使うべきですか?
-
[解決済み] インターフェースと抽象クラスの違いは何ですか?
-
[解決済み] C++でクラスと構造体はいつ使い分けるべきか?
-
[解決済み] TypeScriptでの取得と設定
-
[解決済み] いつ使うか。Java 8+のインターフェイスのデフォルトメソッドと、抽象的なメソッドの比較
-
[解決済み] Typescript によるインターフェース型チェック
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】ERR_INVALID_HTTP_RESPONSEをAngular 7とASP.Net Core 2.2を使ってGoogle Chromeブラウザーで使用する場合
-
[解決済み】angular 4アプリにReactiveFormsModuleを追加すると、NgControl用のプロバイダがないエラーが発生する。
-
[解決済み】Angular2 CLI エラー "@angular/compiler-cli" パッケージが正しくインストールされていません。
-
[解決済み] Angular 2で簡単なアコーディオンを作成するにはどうすればよいですか?
-
[解決済み] Angular 2のコンポーネントプロパティにデフォルト値を設定する方法は?
-
[解決済み] Typescript - コードが TS1128: Declaration or Statement expected というエラーでビルドに失敗するが、コードを提供すると期待通りに実行される。
-
[解決済み] NgModule が見つかりませんでした。NgModule でのインポートをスキップするには skip-import オプションを使用します。
-
[解決済み] Angular 2 ルーターベースなし href = "/stock/stock_detail.html?
-
[解決済み] Angular2において、テンプレートを必要としないコンポーネントがありますが、テンプレートエラーが発生します。
-
[解決済み] JSONオブジェクトをTypeScriptのクラスにキャストする方法を教えてください。