Trouble Shooting
[TypeScript] 'error' is of type 'unknown'.(TypeScript 에러 처리하기)
dev_seon
2023. 1. 11. 22:46
1. 에러 발생
Axios 라이브러리를 이용하여 이메일 중복 검사를 위한 API 요청 함수의 에러 처리를 위한 코드를 작성하던 중 아래와 같은 에러가 발생했습니다.
에러 내용
'error' is of type 'unknown'.
// 에러 발생 코드
const emailAuthentication = async (email: string) => {
try {
return await axiosInstance.post('/api/v1/users/exists-email', {
email,
});
} catch (error) {
console.log(error.response.status); // 에러 발생
}
};
이는 TypeScript의 catch절의 error 변수의 type이 unknown type으로 정의가 되기 때문에 발생하는 에러였습니다.
2. 에러 해결
1) 타입 단언
// error의 interface 정의
// TypeScript의 Error interface를 상속받을 경우 message 프로퍼티는 따로 포함하지 않아도 됨
interface InstanceError {
message: string;
response?: {
status: number;
};
}
export const emailAuthentication = async (email: string) => {
try {
return await axiosInstance.post('/api/v1/users/exists-email', {
email,
});
} catch (error: unknown) { // error 변수의 type을 unknown으로 지정
const err = error as InstanceError; // 타입 단언
console.error(err.response?.status, err.message); // 에러 처리 코드
}
};
2) axios.isAxiosError() 활용
export const emailAuthentication = async (email: string) => {
try {
return await axiosInstance.post('/api/v1/users/exists-email', {
email,
});
} catch (error) {
if (axios.isAxiosError(error)) {
// config, response, message 등에 접근 가능
console.error(error.response?.status, error.message); // 에러 처리 코드
} else {
throw new Error('에러가 발생했습니다.');
}
}
};
3. 고찰
이메일 중복 확인을 위한 API 요청 시 중복된 이메일인 경우 서버로부터 409 status를 전달 받을 수 있었고, 409 status인 경우 이메일 중복 알림을 띄우는 기능이 필요했습니다.
처음에는 이미 사용해보았던 인터셉터를 활용하여 에러를 처리하는 방법이 생각났지만, 이메일 인증의 경우 에러의 status를 확인하여 사용자에게 안내 메시지 또는 에러메시지를 전달하는 기능만이 필요했기 때문에 인터셉터를 사용하기 보다는 API 요청 함수 내에서 에러를 처리해야겠다고 생각했습니다.
에러를 처리하는 과정에서 TypeScript의 catch 절의 error 변수 type이 TypeScript 4.4부터 any에서 unknown으로 바뀌었다는 사실을 알 수 있었고, catch 절의 error 객체의 프로퍼티에 접근하는 다양한 방법을 학습할 수 있었습니다.
참고 자료