[TypeScript] 'error'은(는) 'unknown' 형식입니다.

이처럼 try-catch 구문을 통해 API를 호출할 때,
catch 문에서 잡히는 모든 error는 기본적으로 unknown 타입이기 때문에,error.message와 같은 속성을 직접 접근하면 TypeScript 에러가 발생한다.

여기서 잠깐 🖐

unknown은 무엇을 의미할까?

unknown은 모든 타입의 형태를 가질 수 있지만, 타입을 먼저 확인해야~

🍳지지고 볶고🥘 무엇을 하든 조작이 가능한 형태가 될 수 있음을 의미한다.

any ⇒ 타입을 무시하든, 다양한 타입의 값을 할당하든 알아서 해~
unknown ⇒ 다 알아서 해도 좋은데, 타입 검사 하나만 하고 가자

와 같이 이해할 수 있다.

때문에, error의 1. 타입을 먼저 확인한 후, 2. 속성에 접근해야 하는 것이다.

axios를 사용하여 API를 호출하는 경우, catch에서 잡히는 error는 AxiosError라는 클래스에 감싸져 제공한다.

우리는 이를 통해서 error를 어떻게 안전하게 처리할 지 생각해볼 수 있다.

이와 같은 경우에는 axios.isAxiosError()가 error의 타입을 체크하는 Guard의 역할을 수행해줄 수 있다.

import axios, { AxiosError } from "axios";

catch (error) {
  if (axios.isAxiosError(error)) {
    // error는 AxiosError 타입으로 안전하게 처리 가능
    console.log("🚨 Axios 요청 에러 발생", error.response?.status);
    console.log(error.message);
  } else {
    // Axios 에러가 아닌 경우
    console.log("❓ 알 수 없는 에러", error);
  }
}

이처럼 axios.isAxiosError(error)가 true를 반환하면 error는 AxiosError 타입이 되므로,
타입 안정성과 함께 error.response?.status 또는 error.message등의 속성에 접근하여 예외 처리 로직을 짤 수 있다.

instanceof AxiosError vs axios.isAxiosError

catch (error) {
  if (error instanceof AxiosError) {
    console.log(error.response?.status);
  }
}

간혹 이처럼 instanceof AxiosError를 사용할 수도 있다.
하지만 이는, Axios의 버전에 따라 다르게 동작할 가능성이 있다고 한다.

반면에, axios.isAxiosError()는 Axios 라이브러리 자체에서 제공하는 내장 함수라서 버전의 차이없이, 안전하게 동작한다는 점에서 확실한 장점이 있다.

정리

axios.isAxiosError()를 활용하여 catch 구문의 에러를 처리하면, 타입 에러를 안정적으로 해결하는 좋은 방법이 될 수 있다.