angular2特定のオブジェクトタイプとしての地図データ

Question

私はAngular2チュー​​トリアルに基づいて非常に単純なアプリケーションを作成しました。起動するには

、私は非常に単純な「ブック」モデルがあります：私のサービスで

/** 
* book model 
*/ 
export class Book { 
    public data; 

    /** 
    * constructor 
    * @param id 
    * @param title 
    * @param pages 
    */ 
    constructor(
     public id, 
     public title:string, 
     public pages:Array 
    ){ 
     alert('it works'); // just a check 
    } 
} 

を、私はこのような本を得る：

return this._http.get('getBook/1') 
     .map(function(res){ 
      return <Book> res.json(); 
     }) 

を私の期待は、これはなるだろうということでした結果のJSONデータをBookオブジェクトにマップします。

ただし、タイプが「オブジェクト」のオブジェクトが返されます。

私は自分自身をオブジェクトとこのように、コンストラクタにパラメータを渡し、新しいブックを作成することができます。

return new Book(res.id, res.title, res.pages); 

が、これはこれを行うための最善の方法ですか？私は何か見落としてますか？

Answer 1

はい、オブジェクトをTypeScriptで型にキャストしても、この型のインスタンスは作成されません。これはタイプチェックのためのTypeScriptの機能です。

return this._http.get('getBook/1') 
    .map(function(res){ 
     var data = res.json(); 
     return new Book(data.id, data.title, data.pages); 
    }) 

は、あなたの質問に答えるために：あなたが実際にあなたがそのようなものを使用する必要がBookのインスタンスをしたい場合は

。実際には、あなたのタイプにフィールドを持っているだけの場合（例えばインターフェイスを使って）、キャストは十分です。さらに、後で使用するメソッドがある場合は、キャストする代わりにBook型（上記参照）のインスタンスを暗黙的に作成する必要があります。私はあなたがすべきだと思う

• How do I cast a JSON object to a typescript class

Answer 2

：そうしないと、

は、より多くの詳細については、この質問を見る（彼らはあなたのオブジェクトに定義されません）それらを使用することができません代わりにクラスbookのインタフェースBookを宣言：

あなたのサービスで

export interface Book { 
    public id; 
    public title:string; 
    public pages:Array; 
} 

：

//get one record 
return this._http.get('getBook/1') 
     .map(function(res){ 
      return <Book> res.json(); 
     }); 

//get multi record 
return this._http.get('getBooks') 
     .map(function(res){ 
      return <Book> res.json(); 
     }); 

Answer 3

グッドプラクティスその後、（角ドキュメントhttps://angular.io/guide/httpに係る）

Observable<Model> 

を使用してGET応答からのデータを消費することであり、：

//輸入

import {HttpClient} from "@angular/common/http"; 

//コンストラクタのパラメータリスト

//サービスメソッド

getBook(): Observable<Book> {return this.http.get<Book>({url}, {options});} 

private http: HttpClient