axiosでリクエスト時に型指定をするかthen内で型指定をするかの違いについて

Question

axiosでレスポンスの型を指定する場合、リクエストの際に型指定を行う方法とthenブロック内で型指定を行う方法の２種類があるかと思います。
以下は、リクエスト時に型指定を行う方法です。

axios
      .get<ApiResponse>("/api/v1/user/logout")
      .then((res) => {
        const api_response = res.data;

以下は、thenブロック内で型指定を行う方法です。

axios
      .get("/api/v1/user/logout")
      .then((res) => {
        const api_response: APIResponse = res.data;

動作的にはどちらも同じように思えるのですが、上記二つの違いやメリットデメリットがあれば教えてください。

Comments

[maisumakun]

どのような調査を行い、何を把握している現状でしょうか？

Answer 1

動作的にはどちらも同じように思えるのですが

おっしゃるとおりで、どちらも同じ動作をします。

しかし、違いはあると思います。

ジェネリクスで型を指定した場合、これは、AxiosResponseのdataという型を指定することになります。
つまり、axios.get自体の型定義を正しく利用することになるため、then内でのコールバックの引数で受け取れるのはAxiosResponseの型になるということです。

// axios の型ファイルから引用
get<T = never, R = AxiosResponse<T>>(url: string, config?: AxiosRequestConfig<T>): Promise<R>;
export interface AxiosResponse<T = never>  {
  data: T;
  status: number;
  statusText: string;
  headers: Record<string, string>;
  config: AxiosRequestConfig<T>;
  request?: any;
}

ジェネリクスを活用した場合のaxios.getメソッドの型は以下のようになります。

// 質問者様のコードを引用
axios
      .get<APIResponse>("/api/v1/user/logout")
      .then((res /** このresの型は、Promise<AxiosResponse<APIResponse>>になります */) => {
        const api_response = res.data; // res.dataの型は、AxiosResponse型にある、dataというキーの型になりますので、ApiResponseになります
        const axios_status = res.status; // res.dataの型は、AxiosResponse型にある、statusというキーの型になりますので、numberになります 

// ジェネリクスを使った時のaxios.getの型（置換バージョン）
get<APIResponse, AxiosResponse<APIResponse>>(url: string, config?: AxiosRequestConfig<APIResponse>): Promise<AxiosResponse<APIResponse>>;
export interface AxiosResponse<APIResponse>  {
  data: APIResponse;
  status: number;
  statusText: string;
  headers: Record<string, string>;
  config: AxiosRequestConfig<APIResponse>;
  request?: any;
}

対して、res.data: APIResponseに対して型をつけるというのは、then内で受け取れるコールバックがどのような形で来るのか？というところを無視して型定義を上書きしているような感覚に近いです。
以下にコメント付きで引用してみました。

// 質問者様のコードの引用
axios
      .get("/api/v1/user/logout")
      .then((res /** この時点のresはAxiosResponse<never>型になる可能性がある */) => {
        // なのでここでdataの型を定義して変数に入れている
        const api_response: APIResponse = res.data;
        const api_status = res.status // こちらはAxiosResponseのstatusの型で使用できるはずなので型指定をせずともnumber型になる

このような違いがありますので、Axios自体が用意してくれているものに則って書くのであればジェネリクスを使って書く方が良いような気はします。

Comments

[ruuuu]

ご回答ありがとうございます。
> ジェネリクスで型を指定した場合、これは、AxiosResponseのdataという型を指定することになります。
分かりづらい質問となってしまい申し訳ないのですが、自分の質問したコードでは、ジェネリクスでの型指定の際には<ApiResponse>を使用しています。こちらの箇所とは別の部分を指しているとの認識であっておりますでしょうか。

[uky]

> ジェネリクスでの型指定の際には<ApiResponse>を使用しています。
はい、その認識でおります。

> こちらの箇所とは別の部分を指しているとの認識であっておりますでしょうか。

いえ、.get<ApiResponse>("/api/v1/user/logout")のように指定をすることで、このgetメソッドの戻り値が、私が一つ目のコードに示しているAxiosResponseという型で返却される、ということになります。

そのため、then()内のresとしての型が、AxiosResponse<ApiResponse>という形になり、
その中のdataというキーの型がTからApiResponseに置き換わるので、then()内で型指定をすることなく、res.dataをApiResponse型として利用できるようになる、ということです。

[uky]

回答内容を編集し、ジェネリクスを使った時のaxios.getの型を例示してみました

[ruuuu]

ご丁寧にありがとうございます。
>いえ、.get<ApiResponse>("/api/v1/user/logout")のように指定をすることで、このgetメソッドの戻り値が、私が一つ目のコードに示しているAxiosResponseという型で返却される、ということになります。

そのため、then()内のresとしての型が、AxiosResponse<ApiResponse>という形になり、
その中のdataというキーの型がTからApiResponseに置き換わるので、then()内で型指定をすることなく、res.dataをApiResponse型として利用できるようになる、ということです。

こちらですが詳細にご説明頂きましたおかげで理解できました。

>Axios自体が用意してくれているものに則って書くのであればジェネリクスを使って書く方が良いような気はします。

こちらですが、いってしまえば、動作的な違いはないがaxios推奨の方法で書くに越したことはないというような感じでしょうか。

[juner]

`.then((res /** この時点のresはany型 or never型になる可能性がある */)`
とありますが、 `AxiosResponse<any>` になるだけでは……？

https://github.com/axios/axios/blob/v1.7.3/index.d.ts#L494

[uky]

juner様
ご指摘ありがとうございます。おっしゃる通りでした。

回答修正いたします

[uky]

質問者様
> こちらですが、いってしまえば、動作的な違いはないがaxios推奨の方法で書くに越したことはないというような感じでしょうか。

越したことはないかと思います。
ジェネリクスを使用しないということは、少なくともthenコールバックのres.dataの型定義が適切にできていない状態ということになりますので、微差ではありますがジェネリクスを使用して最初からres.dataの型を指定してあげておいた方がいいと思います。

[ruuuu]

ありがとうございます。
確かに後に型指定をするよりも事前にしておいた方が、後々実装面でよいような気はします。
ご親切に教えて下さり、ありがとうございました。