몽땅뚝딱 개발자
[TypeScript] 타입 선언과 타입 단언 본문
타입스크립트에서 변수에 값을 당하고 타입을 선언하는 방법은 타입 선언, 타입 단언 2가지 형태가 있다.
📄 사용예제
interface Person { name: string };
// 타입 선언: 그 값이 선언된 타입임을 명시
const alice: Person = { name: 'Alice' };
// 타입 단언: 타입스크립트가 추론한 타입이 있더라도 Person 타입으로 간주
const alice = { name: 'Alice' } as Person;
◽ 타입 선언
타입 선언은 할당되는 값이 해당 인터페이스를 만족하는지 검사한다.
아래 예제에서는 Person에 맞는 속성이 없기떄문에 타입스크립트에서 오류를 표시한다.
// 타입 선언
const alice: Person = {}; // error: 'Person' 유형에 필요한 'name' 속성이 {}에 없습니다.
◽ 타입 단언
하지만 타입 단언으로 선언하면 에러없이 통과하는데, 이유는 강제로 타입을 지정했으니 타입 체커에게 오류를 무시하라고 하는 의미와 같아서이다.
따라서 타입 단언은 꼭 필요한 경우가 아니라면 안전성 체크가 되는 타입 선언을 사용하는 것이 더 좋다.
// 타입 단언
// 축약형으로 <Person>{} 같은 형태로 쓰기도 한다.
const alice = {} as Person; // pass
타입 체커가 추론한 타입보다 내가 직접 판단하는 타입이 더 정확할 때 사용하는게 좋다.
예를 들어, 타입스크립트는 DOM에 접근할 수 없기 때문에 document.querySelector('#myButton')로 접근했을 때 #myButton이 버튼 엘리먼트인 것을 알지 못한다.
접미사로 "!"를 사용하여 null이 아님을 단언할 수도 있다. (접두사 !는 boolean의 역할)
이 때 단언문은 컴파일 과정에서 제거되므로, 꼭 null이 아닌 경우에만 사용해야 하고 아니면 null을 체크하는 조건문을 추가해야한다.
const el = document.getElementById('foo') // 타입은 HTMLElement | null
const el = document.getElementById('foo')! // 타입은 HTMLElement
출처
댄 밴터캄, 이펙티브 타입스크립트 (프로그래밍 인사이트, 2021)
개인적으로 공부한 내용을 정리하는 블로그로
잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.
'Development > Typescript' 카테고리의 다른 글
[TypeScript] Utility types - Readonly, ReturnType (0) | 2022.11.19 |
---|---|
[TypeScript] interface와 type의 차이 (0) | 2022.11.14 |
[TypeScript] Utility types - Exclude, Extract, Omit, Pick (0) | 2022.11.12 |
[TypeScript] 제네릭(Generic) - 다시보기 (0) | 2022.06.06 |
[TypeScript] 이넘(Enum) (0) | 2022.06.06 |