---

---

【TypeScript】axiosのバージョン0.22.0はresponseのbodyの型がおかしい！？

投稿日：2021年10月6日

この記事ではTypeScriptでaxiosで利用する際に発生するバグについて、その原因と解決方法について詳しく解説します。

---

はじめに

この記事について

axiosについて

環境

---

バグの発生

発生した状況

import axios from "axios";

/**
 *  リクエストのBodyの型
 */
type Req = {
    topic : string;
}

/**
 * ResponseのBodyの型
 */
type Res = {
    startUrl: string;
    joinUrl: string;
}

// Requestデータの作成
const data:Req = {
    topic: "sample"
}

// サーバーにPost
axios.post("https://example.com",data).then(response => {
    const data = response.data as Res;
    console.log(data);
});

バグの解説

Conversion of type 'Req' to type 'Res' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.
  Type 'Req' is missing the following properties from type 'Res': startUrl, joinUrlts(2352)

export class Axios {
  
//[...]
  
  post<T = never, R = AxiosResponse<T>>(url: string, data?: T, 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のバージョンを下げる

$ npm uninstall --save axios
$ npm install --save axios@0.21

解決案２：post<T,R>()のデフォルトの型を使わない

import axios, { AxiosResponse } from "axios";

/**
 *  リクエストのBodyの型
 */
type Req = {
    topic : string;
}

/**
 * ResponseのBodyの型
 */
type Res = {
    startUrl: string;
    joinUrl: string;
}

// Requestデータの作成
const data = {
    topic: "sample"
}

// サーバーにPost
axios.post<Req, AxiosResponse<Res>>("https://example.com",data).then(response => {
    const data = response.data as Res;
    console.log(data);
});

---

最後に

---

---

---