HttpResponseを指定された型の項目に強制し、カスタムメソッドを使用します。

Question

APIから戻ってくるデータの構造を表すクラスがあります。これらのフィールドにロジックを適用して計算された値を返す便利なメソッドをいくつか追加しました。

私はHttpClientを使用してデータを要求し、次にそれらの簡易メソッドと対話しようとしますが、動作しません。

これは、オブジェクトがクラスアイテムのインスタンスとしてインスタンス化されていないかのようだ

TypeError: item.<method> is not a function. (In 'item.<method>()', 'item.<method>' is undefined) 

、ちょうどあなたが項目以外のものとしてそれを使用しないことが確認された：私はエラーを取得します。したがって、クラス定義で定義されているすべての関数はオブジェクトに関連付けられていません。

タイプチェックだけでなく、JSONをタイプItemの実際のオブジェクトに強制する方法はありますか？

汎用オブジェクトをとり、すべてのフィールドを新しいオブジェクトのフィールドにコピーするコンストラクタを追加できるとします。しかし、これは非常に非効率的なだけでなく、コード臭の匂いがします。

HttpClient/HttpResponseから返されたオブジェクトを便利な関数を含むようにするには、きれいな方法がありますか？ @DeborahKが示唆したように、私はObject.assign()を使用してみました

：

return this.http.get<Item[]>(`${this.apiUrl}/view/projects`, this.options) 
    .map((response: HttpResponse<Item[]>) => { 
    var result = Object.assign(new Array<Item>(),response.body); 
    console.log(result); 
    return result; 
    }); 

をコンソールに書き込まれます何が配列である、それはすべてのデータが含まれていますが、要素のどれもアイテムはありません。おそらく私はアイテムの配列を作成していないので、アイテムを格納するはずの配列を作成しています。

だから私はそうのようにそれを修正：

return this.http.get<Item[]>(`${this.apiUrl}/view/projects`, this.options) 
    .map((response: HttpResponse<Item[]>) => { 
    var result = response.body.map((item:Item) => 
     Object.assign(new Item(),item)); 
    console.log(result); 
    return result; 
    }); 

そして、それは、アイテムの配列を作成します。わーい！問題が解決しました！ @DeborahKありがとうございました

Answer 1

HttpClientは、提供されたクラスまたはインターフェイスに一致するレイアウトのデータを提供しますが、これまで見たとおり、実際にはクラス自体のインスタンスは作成されません。 Itemがあなたのクラスとdataの名前です

Object.assign(new Item(), data); 

は、HTTPリクエストから戻ってくるデータである：あなたの.subscribeで

は、あなたがこのような何かを行うことができます。

これは、クラスの新しいインスタンスを作成し、返されたデータをそのインスタンスに割り当てます。

さらに詳しいコードを提供したい場合は、より具体的な例を挙げることができます。