[TIL] 타입 단언과 타입 가드

 

문제

타입 스크립트를 사용할 때 금기시 되는 것들이 있다.

• 타입 단언 as
• any 사용

Typescript에서 as 키워드는 타입 단언(type assertion)을 사용하여 특정 변수 또는 객체가 특정 타입임을 명시적으로 지정할 때 사용됩니다. 그러나 이를 남용하면 런타임 오류를 초래할 수 있으므로 권장되지 않습니다.

 

어떠한 런타임 오류를 발생할 수 있을까?

주로 발생하는 에러는 개발자가 타입을 잘못 단언하여 발생한다. 이에 런타임에는 js로 변환되어 타입 정보가 없어지고 예기치 않은 오류가 발생한다. 

 

1.프로퍼티 접근 오류

const obj: any = { name: "Alice" };
const age: number = (obj as { age: number }).age;
console.log(age.toFixed(2)); // 런타임 오류: Cannot read properties of undefined (reading 'toFixed')

없는 프로퍼티를 단언해서 런타임 오류 발생

 

2. 배열 메서드 오류

const data: any = {};
const result = (data as number[]).map(num => num * 2);
console.log(result); // 런타임 오류: data.map is not a function

객체를 배열로 단언한 뒤 배열 메서드를 사용했다.(런타임 에러)

 

 

해결

타입 주석, 혹은 타입 가드로 안전하게 대체할 수 있다.

 

function isNumber(value: any): value is number {
  return typeof value === 'number';
}

// ...

<h2>{isNumber(id) ? keywords[id] : "Invalid ID"}</h2>

 

혹은 Null체크를 같이 해줄수 있다.

 

function isNumber(value: any): value is number {
    //약한 비교로 null undefined NaN을 걸러낸다.
    return value != null && typeof value === 'number';
}

export { isNumber };

참고로 is 키워드는 함수의 리턴값이 참이라면 해당 인자(value)를 특정 타입(number)으로 본다는 키워드이다 

필요한 경우

부득이하게 써야할 경우도 있다.

• 빈 객체에 프로퍼티를 선언과 동시에 대입할 때
• HTML 요소에 접근할 때 

//CRA Typescript

const container = document.getElementById("root") as HTMLDivElement;
const root = createRoot(container);

root.render(
  <React.StrictMode>
        <App />
  </React.StrictMode>
);

• 직렬화 된 JSON 값을 역직렬화 했을 때

next/image remotePatterns

원격패턴이 이전버전과 다르게 변경되었다

module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'example.com',
        port: '',
        pathname: '/account123/**',
      },
    ],
  },
}

알지 못하는 프로퍼티는 비울 수 있다. 호스트네임을 제외하고

 

로더파일을 이용할 수도있다.

https://nextjs.org/docs/pages/api-reference/components/image#loaderfile

Components: <Image> | Next.js