<Angular> overrideでバックエンドとの処理をきれいに書く

あらまし

• 複数人でフロントを作成
• Angular で Class を一つ一つ作るのがめんどい
• バックエンドの処理とやり取りをする Service の返り値として受け取る型（クラス）がまちまち
  • component もそれぞれ変わるから統一しにくい・見にくい

その状況の1打開策。↓↓

やったこと

エラーの返し方、レスポンスの取り方を統一して、Service での返り値は下記でいう
Response を必ず継承させたものにしておく。

error-response.ts

export class ErrorResponse {
    StatusCode:number
    ErrorMessage:string
}

response.ts

import { ErrorResponse } from './error-response'

export class Response {
    header:ErrorResponse
    result:any
}

hoge.ts

import { Response } from './response'

export class Hoge {
    name:string
    id:number
}
// レスポンスを継承でアプリ内で使うクラスごとに定義しなくてもよくなる
export class ResponseHoge extends Response {
    result:Hoge 
}

これで、、、

• StatusCode
• Name
• Id

またある人は

• statusCode
• data
  • name
  • id

またまたある人は

• statusCode
• result
  • name
  • id

うおーーー
という状況がなくなり

各APIごとの返り値を揃えられる。

なので、componentで値を処理する動きも統一、さらにバックエンド側の処理も統一できるため、
コード内が非常に見やすくなると思います。

hoge.component.ts

get(){
    let sub = this.Api.getHoge().subscribe(
      res => {
        if(res.header.StatusCode != 200){
          window.alert('エラー')
        }else{
          window.alert('name:' + res.result.name + ' id:' + res.result.name)
        }
      },
      err => window.alert('接続エラー')
    )
  }