Axios Typescript Type 확장하기 – 새 속성으로 AxiosRequestConfig 커스터마이징하기

제목: TypeScript에서 React에서 요청을 처리하기 위해 AxiosRequestConfig를 커스터마이징하는 방법

소개

React에서 HTTP 요청을 만들기 위해 Axios를 사용하는 경우, AxiosRequestConfig를 커스터마이징하고 추가 속성을 추가해야 할 상황이 발생할 수 있습니다. 이 블로그 포스트에서는 TypeScript에서 AxiosRequestConfig 유형을 확장하고 새로운 유형을 할당하는 방법을 안내합니다.

문제

React 프로젝트에서 Axios에 대한 사용자 정의 구성을 만들고 AxiosRequestConfig 객체에 handlerEnabled라는 새로운 속성을 추가한다고 가정해 봅시다:

// theFileYouDeclaredTheCustomConfigIn.ts
declare module 'axios' {
  export interface AxiosRequestConfig {
    handlerEnabled: boolean;
  }
}

// 코드에서 사용
import $axios from 'helpers/axiosInstance';
$axios.get('/customers', { handlerEnabled: false });

하지만 TypeScript 코드를 컴파일하려고 할 때, 다음과 같은 오류가 발생합니다:

Argument of type '{ handlerEnabled: boolean; }' is not assignable to parameter of type 'AxiosRequestConfig'.
Object literal may only specify known properties, and 'handlerEnabled' does not exist in type 'AxiosRequestConfig'.

해결책

AxiosRequestConfig에 새로운 유형을 할당하기 위해 TypeScript 선언 병합 기능을 사용할 수 있습니다. ‘axios’에 대한 모듈 선언을 확장하고 원하는 속성을 추가함으로써 사용자 정의 구성과 호환되도록 만들 수 있습니다:

// axios.d.ts에 추가
import 'axios';

declare module 'axios' {   
    export interface AxiosRequestConfig {
        handlerEnabled?: boolean;   
    } 
}

이제 커스텀 속성 ‘handlerEnabled’를 TypeScript 컴파일 오류 없이 사용할 수 있습니다:

// 코드에서 사용
import $axios from 'helpers/axiosInstance';
$axios.get('/customers', { handlerEnabled: false });

결론

TypeScript에서 AxiosRequestConfig 유형을 확장함으로써 React 프로젝트에서 특정 요구 사항을 처리하기 위해 커스터마이징할 수 있습니다. 이를 통해 Axios 구성을 필요에 맞게 조정하여 HTTP 요청을 만들 때 더욱 원활하고 효율적인 경험을 제공할 수 있습니다.

이 블로그 포스트에서 설명된 대로 컴파일 오류를 피하기 위해 타사 라이브러리 유형을 확장할 때 TypeScript 선언 병합과 모듈 추가 기능을 사용하는 것을 기억해 주세요. 즐거운 코딩하세요!

참고 자료 : 

reactjs