Typescript 환경에서 REST API 호출을 위해 Axios 사용하기

개요

Axios를 이용하여 REST API 를 사용할 경우,

IDE 의 자동완성 기능의 도움을 받고자 Axios 로 수신한 응답 데이터의 Type 을 지정하고 싶습니다.

본문

Axios 에는 사전에 정의된 응답에 대한 Type 이 다음과 같이 정의가 되어 있습니다.

export interface AxiosResponse<T = never>  {
  data: T;
  status: number;
  statusText: string;
  headers: Record<string, string>;
  config: AxiosRequestConfig<T>;
  request?: any;
}

따라서 아래와 같이 설정을 하면 응답에 대해 형식을 지정할 수 있습니다.

예시코드 (우편번호 응답)

interface resEPostAPI {
  NewAddressListResponse : {
    cmmMsgHeader : string,
    responseMsgId: string,
    responseTime: string,
    successYN: 'Y' | 'N',
    returnCode: string,
    errMsg: string,
    totalCount: number,
    countPerPage: number,
    totalPage: number,
    currentPage: number,
    newAddressListAreaCdSearchAll: [{
      zipNo: number,
      lnmAdres : string,
      rnAdres : string
    }]
  }
}

const api = axios.create({
  baseURL: "http://openapi.epost.go.kr/postal/retrieveNewAdressAreaCdSearchAllService/retrieveNewAdressAreaCdSearchAllService",
  headers: {
    "Access-Control-Allow-Origin": "*",
    "Content-Type": "application/json",
  },
});

const ADDR = encodeURI("세종로17");
const CURRENT_PAGE = "1";
const COUNT_PER_PAGE = "10";
const SERVICE_KEY ="";
const URI = `/getNewAddressListAreaCdSearchAll?ServiceKey=${SERVICE_KEY}&countPerPage=${COUNT_PER_PAGE}&currentPage=${CURRENT_PAGE}&srchwrd=${ADDR}`;
let { data } = await api.get<resEPostAPI>(URI);
console.log(data.NewAddressListResponse.newAddressListAreaCdSearchAll[0]);

출처

• Axios Response in TypeScript | Delft Stack