# axios

【Typescript】axiosのレスポンスはきちんと型チェックしよう

Posted 12. August 2020

Programming #typescript #axios

Axiosでエラー

Axiosで外部APIを叩いてデータを取得したいと思い、下記のコードを書いたとします。

import axios, { AxiosPromise } from "axios";

interface CatApiResponse {
  name: string;
  age: number;
  parents: string[];
}

const client = axios.create({
  baseURL: "https://example.com/api/v2/",
  headers: {
    "Content-Type": "application/json"
  }
});

const fetchAllCat = (): AxiosPromise<CatApiResponse> => client.get("cat");

const hoge = () => {
  const data = fetchAllCat();
  data.then((data) => {
    data.data.parents.map((parent) => {
      console.log(parent);
      return "hoge";
    });
  });
};
Code 1: AxiosでAPIを叩いて情報を取得するコード例

IDEで型推定を確認すると、確かに CatApiResponse になっている。

...

READ MORE

Time to read 1 min