axios の レスポンスの型定義について、少し確認したのでメモ。
目的
axios のレスポンスについて TypeScript の型チェックが実行されるように型定義をする。
エラー時は、レスポンスの結果のプロパティを含まないので、誤ってプロパティに触らないようしたい。
想定レスポンス
- 正常系
1 2 3 4 5 6 7
| { "success": true, "errorMessage": "", "payload": { "id": 123 }, }
|
- エラー
1 2 3 4
| { "success": false, "errorMessage": "same error message", }
|
- これ以外に、ネットワークのエラーもあるが、これは chache で拾うので考慮しない。
プラン 1
型定義で 内容を固めてしまうパターン。
型定義 1
型定義1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
| type User = { id: number }
type BaseApiResponse = { success: boolean errorMessage: string }
type SuccessResponse = BaseApiResponse & { success: true payload: { user: User } }
type FailerResponse = BaseApiResponse & { success: false payload: null }
type ApiResponse = SuccessResponse|FailerResponse
|
axios の利用 1
1 2 3 4 5 6 7 8 9 10 11 12
| try { const res = await axios.get<ApiResponse>("/api/resource"); if (!res.data.success) { console.log(res.data.errorMessage) return } console.log(res.data.payload.user.id); } catch { console.error("/API ERROR/"); }
|
プラン 2
型を引数に内容を設定するパターン。
型定義 2
型定義1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
| type PayloadUser = { user: { id: number } }
type BaseApiResponse = { success: boolean errorMessage: string }
type SuccessResponse<T> = BaseApiResponse &{ success: true payload: T }
type FailerResponse = BaseApiResponse & { success: false payload: null }
type ApiUserResponse = SuccessResponse<PayloadUser>|FailerResponse
|
axios の利用 2
1 2 3 4 5 6 7 8 9 10 11 12
| try { const res = await axios.get<ApiUserResponse>("/api/resorce"); if (!res.data.success) { console.log(res.data.errorMessage) return } console.log(res.data.payload.user.id); } catch { console.error("/ERROR-API/"); }
|
型を設定せずに axios を使うと、レスポンスは any になり推論が効かない問題を解決した。
ではでは。