[TIL] [타임어택9기][리뉴얼] 타입스크립트 올인원 : Part2. lib.es5.d.ts 분석- (17) : 타입스크립트는 건망증이 심하다(+에러 처리법)

타입스크립트는 건망증이 심하다(+에러 처리법)

 

 

 

 

조심해야할 점

as는 any만큼 사용을 피해야 되는 것, as는 unknown일 때 써야한다

interface Axios {
    get(): void;
}

타입가드로 좁혀놓아도 자바스크립트로 전환 시, interface나 type은 사라진다 -> class 사용 

 

 

 

 

 

 

 

 

interface에서 class로 

// interface에서 class로 
interface CustomError {
    name: string;
    message: string;
    stack?: string;
    response?: {
    data: any;
   }
}

class CustomError extends Error {
    response?: {
        data: any;
    }
}

 

 

 

 

 

 

 

 

 

 

타입가드로 좁혀놓음, 그 안에서 as는 안 써도 된다  (declare)

declare const axios: Axios;
(async () => {
    try {
        await axios.get();
    } catch (err: unknown) {
        console.error((err as CustomError).response?.data);
        err.response?.data; // 위에서 as로 정의해주었지만 다음 줄부터 바로 까먹어버린다 (일회성) -> 다시 선언(매번 or 변수 저장하여 사용)

        const customError = err as CustomError;
        console.error(customError.response?.data);
        customError.response?.data;
        
        /*
            하지만 이렇게 코드 작성은 좋지 않다.
            자바스크립트에서 바로 에러 발생할 가능성이 높다 -> interface CustomError는 변환 시 사라짐 -> class 대체 사용 (자바스크립트에 남아있으면서 인터페이스 역할을 하기 때문에)
            customError가 아니라 다른 에러면 어떻게 할거에요
        */

        if (err instanceof CustomError) {
            console.error( err.response?.data);
            customError.response?.data;
        }
    }
})();

 

any 타입 포기, unknown 타입캐스팅하든 타입가드 붙이든 안전하게 써 => unknown 사용 권장

 

 

 

 

 

 

 

 

 

 

 

타입 캐스팅(Type Casting), 타입 가드(Type Guards)

타입 캐스팅은 변수의 타입을 강제로 다른 타입으로 변환하는 것

타입 가드는 특정 범위 내에서 변수의 타입을 좁히는(Refining) 표현식

 

 

 

 

 

< 타입 캐스팅>

타입스크립트는 컴파일 타임에 타입을 확인하는데, 때로는 개발자가 특정 변수가 더 구체적인 타입을 가지고 있음을 알고 있을 경우, 이 정보를 타입스크립트 컴파일러에게 알려주기 위해 타입 캐스팅을 사용

타입 캐스팅은 주로 <타입> 구문이나 as 타입 구문을 사용

// <타입> 구문을 사용한 타입 캐스팅
let strLength: number = (<string>someValue).length;

// 'as 타입' 구문을 사용한 타입 캐스팅
let strLengthAs: number = (someValue as string).length;

 

 

 

 

 

 

 

<타입 가드>

타입 가드를 사용하면 컴파일러는 그 범위 내에서 변수가 특정 타입임을 '알게' 됨

로 조건문 내에서 사용되며, typeof, instanceof, 사용자 정의 타입 가드 등을 통해 구현할 수 있

타입 가드를 사용하면 런타임에 타입을 검사하여 안전하게 해당 타입의 프로퍼티나 메서드에 접근할 수 있음

function isString(test: any): test is string {
    return typeof test === "string";
}

function example(foo: any) {
    if (isString(foo)) {
        // 이 블록 내에서, foo는 'string' 타입으로 취급됩니다.
        console.log(foo.length); // string 타입의 'length' 프로퍼티에 접근 가능
    }
}

 

 

 

 

 

 

 

 

 

 

<차이점>

목적성

타입 캐스팅은 개발자가 변수의 타입을 이미 알고 있을 때 사용하여 컴파일러에게 타입 정보를 제공

타입 가드는 런타임에 조건을 사용하여 변수의 타입을 검사하고, 해당 범위 내에서 변수의 타입을 안전하게 좁힘

 

안정성

타입 캐스팅은 개발자가 올바른 타입을 지정했다고 가정하기 때문에 잘못 사용될 경우 런타임 오류를 발생시킬 수 있음

타입 가드는 실제 런타임 값에 기반하여 타입을 검사하기 때문에 보다 안전한 타입 체킹을 제공