기술 블로그
[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
Good to know: If you are using a version of Next.js prior to 13, you'll want to use the next/legacy/image documentation since the component was renamed. This API reference will help you understand how to use props and configuration options available for th
nextjs.org
'프론트엔드 > TIL' 카테고리의 다른 글
패칭 (0) | 2023.11.27 |
---|---|
[TIL] router-query object in object 와 레이아웃 컴포넌트, image/next (0) | 2023.09.21 |
[TIL] map key (0) | 2023.09.18 |
[TIL] ssr 로딩지연과 Exhaustive-deps (0) | 2023.09.17 |
[TIL] npm 의존성과 Sember 버전지정자 (0) | 2023.09.16 |