回答編集履歴

4

修正漏れ

2024/08/02 01:57

投稿

uky
uky

スコア241

test CHANGED
@@ -50,7 +50,7 @@
50
50
  .then((res /** この時点のresはAxiosResponse<never>型になる可能性がある */) => {
51
51
  // なのでここでdataの型を定義して変数に入れている
52
52
  const api_response: APIResponse = res.data;
53
- // もしresのデータも指定したい場合は同じよう新しく変数に入れてあげ必要がある
53
+ const api_status = res.status // こちらはAxiosResponsestatus型で使用できるはずなので型指定をせずともnumber型
54
54
  ```
55
55
 
56
56
  このような違いがありますので、Axios自体が用意してくれているものに則って書くのであればジェネリクスを使って書く方が良いような気はします。

3

指摘いただいた通りに修正

2024/08/02 01:54

投稿

uky
uky

スコア241

test CHANGED
@@ -47,7 +47,7 @@
47
47
  // 質問者様のコードの引用
48
48
  axios
49
49
  .get("/api/v1/user/logout")
50
- .then((res /** この時点のresはany型 or never型になる可能性がある */) => {
50
+ .then((res /** この時点のresはAxiosResponse<never>型になる可能性がある */) => {
51
51
  // なのでここでdataの型を定義して変数に入れている
52
52
  const api_response: APIResponse = res.data;
53
53
  // もしresの他のデータも指定したい場合は同じように新しく変数に入れてあげる必要がある

2

少し変更

2024/08/01 05:47

投稿

uky
uky

スコア241

test CHANGED
@@ -18,14 +18,15 @@
18
18
  request?: any;
19
19
  }
20
20
  ```
21
- 上記の方を含めて置き換えるとジェネリクスを活用した場合は以下のようになります。
21
+ ジェネリクスを活用した場合のaxios.getメソッドの型は以下のようになります。
22
22
 
23
23
  ```ts
24
24
  // 質問者様のコードを引用
25
25
  axios
26
26
  .get<APIResponse>("/api/v1/user/logout")
27
- .then((res) => {
27
+ .then((res /** このresの型は、Promise<AxiosResponse<APIResponse>>になります */) => {
28
- const api_response = res.data;
28
+ const api_response = res.data; // res.dataの型は、AxiosResponse型にある、dataというキーの型になりますので、ApiResponseになります
29
+ const axios_status = res.status; // res.dataの型は、AxiosResponse型にある、statusというキーの型になりますので、numberになります
29
30
 
30
31
  // ジェネリクスを使った時のaxios.getの型(置換バージョン)
31
32
  get<APIResponse, AxiosResponse<APIResponse>>(url: string, config?: AxiosRequestConfig<APIResponse>): Promise<AxiosResponse<APIResponse>>;
@@ -39,7 +40,7 @@
39
40
  }
40
41
  ```
41
42
 
42
- 対して`res.data: APIResponse`に対して型をつけるというのは、`then`内で受け取れるコールバックがどのような形で来るのか?というところを無視して型定義を上書きしているような感覚に近いです。
43
+ 対して`res.data: APIResponse`に対して型をつけるというのは、`then`内で受け取れるコールバックがどのような形で来るのか?というところを無視して型定義を上書きしているような感覚に近いです。
43
44
  以下にコメント付きで引用してみました。
44
45
 
45
46
  ```ts

1

質問者様のサンプルコードを活用した記載を追加

2024/08/01 05:40

投稿

uky
uky

スコア241

test CHANGED
@@ -18,6 +18,26 @@
18
18
  request?: any;
19
19
  }
20
20
  ```
21
+ 上記の方を含めて置き換えるとジェネリクスを活用した場合は以下のようになります。
22
+
23
+ ```ts
24
+ // 質問者様のコードを引用
25
+ axios
26
+ .get<APIResponse>("/api/v1/user/logout")
27
+ .then((res) => {
28
+ const api_response = res.data;
29
+
30
+ // ジェネリクスを使った時のaxios.getの型(置換バージョン)
31
+ get<APIResponse, AxiosResponse<APIResponse>>(url: string, config?: AxiosRequestConfig<APIResponse>): Promise<AxiosResponse<APIResponse>>;
32
+ export interface AxiosResponse<APIResponse> {
33
+ data: APIResponse;
34
+ status: number;
35
+ statusText: string;
36
+ headers: Record<string, string>;
37
+ config: AxiosRequestConfig<APIResponse>;
38
+ request?: any;
39
+ }
40
+ ```
21
41
 
22
42
  対して`res.data: APIResponse`に対して型をつけるというのは、`then`内で受け取れるコールバックがどのような形で来るのか?というところを無視して型定義を上書きしているような感覚に近いです。
23
43
  以下にコメント付きで引用してみました。
@@ -26,7 +46,7 @@
26
46
  // 質問者様のコードの引用
27
47
  axios
28
48
  .get("/api/v1/user/logout")
29
- .then((res /** この時点のresはany型になる可能性がある */) => {
49
+ .then((res /** この時点のresはany型 or never型になる可能性がある */) => {
30
50
  // なのでここでdataの型を定義して変数に入れている
31
51
  const api_response: APIResponse = res.data;
32
52
  // もしresの他のデータも指定したい場合は同じように新しく変数に入れてあげる必要がある