axiosのresponse.dataをTypeScriptの型定義Interfaceをした上で受け取る

axiosのResponse Schema

github.com

便利なTypeScriptの型まとめ

qiita.com

https://zipcloud.ibsnet.co.jp/api/search?zipcode=3306032

import axios from 'axios';

export {};

let url: string =
  'https://zipcloud.ibsnet.co.jp/api/search?zipcode=3306032';

axios.get(url).then(function(response) {

  // [1]
  let res: any = response;
  // console.log(res);
  // data: { message: null, results: [ [Object] ], status: 200 }
  // status: 200,
  // statusText: 'OK',
  // headers: {
  //   'access-control-allow-origin': '*',
  //   'content-type': 'text/plain;charset=utf-8',
  //   'x-cloud-trace-context': '12345678abcdefg',
  //   date: 'Tue, 26 Oct 2021 16:03:45 GMT',
  //   server: 'Google Frontend',
  //   'content-length': '457',
  //   connection: 'close'
  // },
  // config: {}

  // [2]
  let data: any = response.data;
  // console.log(data);
  // {
  //   message: null,
  //   results: [
  //     {
  //       address1: '埼玉県',
  //       address2: 'さいたま市中央区',
  //       address3: '新都心明治安田生命さいたま新都心ビル　３２階',
  //       kana1: 'ｻｲﾀﾏｹﾝ',
  //       kana2: 'ｻｲﾀﾏｼﾁｭｳｵｳｸ',
  //       kana3: 'ｼﾝﾄｼﾝﾒｲｼﾞﾔｽﾀﾞｾｲﾒｲｻｲﾀﾏｼﾝﾄｼﾝﾋﾞﾙ32ｶｲ',
  //       prefcode: '11',
  //       zipcode: '3306032'
  //     }
  //   ],
  //   status: 200
  // }

  // [3]
  // let responseDataResults: any = response.data.results;
  // console.log(responseDataResults);
  // [
  //   {
  //     address1: '埼玉県',
  //     address2: 'さいたま市中央区',
  //     address3: '新都心明治安田生命さいたま新都心ビル　３２階',
  //     kana1: 'ｻｲﾀﾏｹﾝ',
  //     kana2: 'ｻｲﾀﾏｼﾁｭｳｵｳｸ',
  //     kana3: 'ｼﾝﾄｼﾝﾒｲｼﾞﾔｽﾀﾞｾｲﾒｲｻｲﾀﾏｼﾝﾄｼﾝﾋﾞﾙ32ｶｲ',
  //     prefcode: '11',
  //     zipcode: '3306032'
  //   }
  // ]
  
  interface Zipcode {
    id: number;
    title: string;
    description: string;
    address1: string;
    address2: string;
    address3: string;
    kana1: string;
    kana2: string;
    kana3: string;
    prefcode: string;
    zipcode: string;
  }
  let responseDataResults: Zipcode[];
  responseDataResults = response.data.results;
  console.log(responseDataResults);
});