과거 프로그래밍 자료들/Javascript&typescript
[TS] 에러 처리법(interface, class 차이 비교)
평부
2022. 9. 18. 15:37
출처 : https://github.com/ZeroCho/ts-all-in-one
* interface와 class를 각각 언제 써야 하나?
▶ interface
- 자바스크립트로 변환 시 사라짐
- instanceof 키워드 못 씀
- interface 자체를 타입가드에서 사용 불가
▶ class
- 자바스크립트로 변환 시 유지됨
- instanceof 키워드 사용 가능
- interface 자체를 타입가드에서 사용 가능
(문제 있는 코드) [예시]
interface Axios {
get(): void;
}
interface CustomError extends Error {
response?: {
data: any;
}
}
declare const axios: Axios;
(async () => {
try {
await axios.get();
} catch(err: unknown) {
console.error((err as CustomError).response?.data);
//문제
//위에서 에러를 정해줬으나 아래에 넣을 경우 까먹음 = 일회성
//err 관련해서 err as CustomError 넣어줘야 함
(err as CustomError).response?.data
}
})();
(문제 있는 코드) [예시 - 변경했으나 여전히 오류 있음, err가 반드시 CustomError라는 보장 없음]
interface Axios {
get(): void;
}
interface CustomError extends Error {
response?: {
data: any;
}
}
declare const axios: Axios;
(async () => {
try {
await axios.get();
} catch(err: unknown) {
const customError = err as CustomError
console.error(customError.response?.data);
customError.response?.data
}
})();
//as는 unknown일 때 사용
(최종) [예시]
▶ interface → class 변경
▶ err가 CustomError가 되도록 타입가드 사용
interface Axios {
get(): void;
}
class CustomError extends Error {
response?: {
data: any;
}
}
declare const axios: Axios;
(async () => {
try {
await axios.get();
} catch(err) {
//err instanceof CustomError(타입가드) 있기 전 err는 unknown이었으나 있으면 커스텀 에러로 좁혀짐
//타입가드로 범위 좁혀놨으면 as 사용하지 않아도 됨
if(err instanceof CustomError) {
//as를 붙이는 건 사람이 함 = 실수 있을 수 있음
// const customError = err as CustomError
console.error(err.response?.data);
err.response?.data
}
}
})();
* unknown과 any 차이
- unknown : 타입 캐스팅을 하든 타입가드를 하든 안전하게 쓰라는 의미
- any : 타입검사 포기(모든 게 다 가능)
* 참고 : https://jusung.gitbook.io/the-swift-language-guide/language-guide/18-type-casting