관리 메뉴

프로그래밍 삽질 중

[TS] 에러 처리법(interface, class 차이 비교) 본문

과거 프로그래밍 자료들/Javascript&typescript

[TS] 에러 처리법(interface, class 차이 비교)

평부 2022. 9. 18. 15:37

출처 : https://github.com/ZeroCho/ts-all-in-one

 

GitHub - ZeroCho/ts-all-in-one

Contribute to ZeroCho/ts-all-in-one development by creating an account on GitHub.

github.com

 

 

* 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

 

타입캐스팅 (Type Casting) - The Swift Language Guide (한국어)

library가 갖고 있는 Movie,Song인스턴스의 공통 부모는 MediaItem이기 때문에 library는 타입 추론에 의해 [MediaItem] 배열의 형을 갖게 됩니다. library를 순회(iterate)하면 배열의 아이템은 Movie, Song 타입이

jusung.gitbook.io