モデルへの対応マッピング - ベストプラクティス

Question

角度4、5でスピードアップし、強力な型指定されたオブジェクト/モデルにJSON応答をマッピングするためのベストプラクティスが不思議でした。

サービス：

getUsers(): Observable<User[]> { 
    return this.http.get<User[]>('http://localhost:8000/users/') 
    .pipe(
     tap(users => this.log(`fetched users`)), 
     map(response => { 
     return response.map((res) => 
     { 
      return new Hero(
      response['username'], 
      response.email); 
     }); 
     }), 
     catchError(this.handleError('getUsers', [])) 
    ); 
} 

インタフェース/モデル：

export interface IUser { 

    id: number; 
    name: string; 
    email: string; 
} 

export class Hero implements User { 

    public id: number; 

    constructor(public name: string, 
      public email: string) { 

    } 
} 

リターンユーザーオブジェクトで観察アレイ。 usernameはそのオブジェクトのメンバーではありませんので、この表記法を使用すると、ドット表記法でエラーが発生するためです。明らかに、私は最終的に、そのMap関数をテスト容易性/明快さのための別個の関数に持っていきます。

このマッピング/再マッピング/トランスフュージョンを正しく処理するにはどうすればよいですか？

Answer 1

あなたはあまりにも多くの問題を抱えています。

export interface IUser { 
    id: number; 
    username: string; 
    email: string; 
} 

getUsers(): Observable<User[]> { 
    return this.http.get<User[]>('http://localhost:8000/users/') 
    .catch(err => this.handleError('getUsers', [])); 
} 

ここでは、あなたの応答が入力されます。

developping helpと入力文字を参照してください。コーディング中にクラスなどを持つことは非常に便利ですが、アプリケーションをビルドすると、すべてがJavascriptにコンパイルされ、すべてのクラスとプロパティが失われます。

あなたはあまりにもそれを考えるべきではありません。一番簡単なところに行って、うまくいくはずです。それ以外の場合は、エラーがどこにあるかを教えてくれるTSリンターがまだあります！