回答編集履歴
4
修正漏れ
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
|
-
//
|
|
53
|
+
const api_status = res.status // こちらはAxiosResponseのstatusの型で使用できるはずなので型指定をせずともnumber型になる
|
|
54
54
|
```
|
|
55
55
|
|
|
56
56
|
このような違いがありますので、Axios自体が用意してくれているものに則って書くのであればジェネリクスを使って書く方が良いような気はします。
|
3
指摘いただいた通りに修正
test
CHANGED
|
@@ -47,7 +47,7 @@
|
|
|
47
47
|
// 質問者様のコードの引用
|
|
48
48
|
axios
|
|
49
49
|
.get("/api/v1/user/logout")
|
|
50
|
-
.then((res /** この時点のresは
|
|
50
|
+
.then((res /** この時点のresはAxiosResponse<never>型になる可能性がある */) => {
|
|
51
51
|
// なのでここでdataの型を定義して変数に入れている
|
|
52
52
|
const api_response: APIResponse = res.data;
|
|
53
53
|
// もしresの他のデータも指定したい場合は同じように新しく変数に入れてあげる必要がある
|
2
少し変更
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
質問者様のサンプルコードを活用した記載を追加
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の他のデータも指定したい場合は同じように新しく変数に入れてあげる必要がある
|