[타입스크립트] 타입 가드로 catch문 error 타입 정하기

 

Intro

회원가입이나 로그인을 할 때 에러가 발생하면

서버가 에러 메시지를 리턴해주는 경우가 있다.

 

그런데, error.message를 보려고 하니 error에는 message가 없다며 타입 에러가 발생한다.

에러 타입을 어떻게 정해주면 좋을까?

 

---

try ~ catch문 에러 타입 정하기

문제

error의 타입은 unknown이기 때문에

바로 console.log(error.message)를 하면 타입 에러가 발생한다.

 

const getUsers = (a: string | number) => {
	try {
    	// actions..
    } catch (error) {
      console.log(error.message) // Error!
    }
}

 

해결

instanceof Error로 타입을 좁혀주면

타입 에러가 사라진다.

이렇게 타입을 좁혀주는 것을 타입 가드라고 한다.

 

const getUsers = (a: string | number) => {
	try {
    	// actions..
    } catch (error) {
    	if (error instanceof Error) {
            console.log(error.message);
        }
    }
}

 

---

통신 에러

axios 라이브러리에서 제공하는 AxiosError를 이용하면

details를 확인할 수 있다.

 

import { AxiosError } from 'axios';

...
catch (error) {
	if (err instanceof AxiosError) {
        console.log(error.response.data.details);
    }
}

 

---

느낀 점

유니온이거나 unknown 일 때 위와 같은 에러가 발생하면

타입 가드를 쓰는 게 좋은 것 같다. 자주 활용 해보자!!

 

 

참고 자료

- 2023 원티드 프리온보딩 FE 1월 강의

- 타입스크립트 deep dive (링크)