TypeScript axios 에러 처리 그리고 is 연산자

axios를 사용할 때 데이터를 요청하는 경우에는 axios.get<T> 와 같이 제네릭을 이용해서 응답데이터를 지정할 수 있다

그런데 에러데이터는 try catch에서 처리할 때 catch의 error는 unknown, react-query를 이용하는 경우 any이기 때문에 as 로 타입캐스팅을 종종했었다

axios 에러 처리

axios에서는 isAxiosError 메서드를 이용해서 타입을 확인할 수 있다

• https://github.com/axios/axios/blob/a52e4d9af51205959ef924f87bcf90c605e08a1e/lib/helpers/isAxiosError.js#L12

• 참고: https://gxxrxn.github.io/axios-error-type-guard/

export function isAxiosError<T = any, D = any>(payload: any): payload is AxiosError<T, D>;

is 연산자

위 타입을 확인해보면 리턴타입이 boolean이 아닌 isAxiosError 메소드의 파라미터인 payload 의 타입을 AxiosError<T, D>; 로 타입캐스팅하는 것을 확인할 수 있다

TypeScript에서 is 연산자는 타입 가드(type guard)로 사용된다

JavaScript의 instanceof 연산자로 클래스의 인스턴스 타입을 확인하는 것 처럼 사용될 수 있다

type Color = "Red" | "Blue" | "Yellow";

const isBlue = (color: string): boolean => {
  return color === "Blue";
};

// 리턴타입이 boolean인 함수에서 is연산자를 사용해서 타입가드로 사용할 수 있다
const isRed = (color: string): color is "Red" => {
  return color === "Red";
};

• is 연산자는 리턴타입이 boolean인 함수에서 사용가능하다

• 하지만 이렇게 잘못 사용할 수 있으므로 주의해서 사용하자