아래 예제는 변수를 할당 할 때, 타입 단언과 타입 선언을 사용하는 코드입니다.
interface Person { name: string };
const alice: Person = { name: 'Alice' }; // 타입 선언 (추천)
const bob = { name : 'Bob'} as Person; // 타입단언 (비추)
|
타입 선언이 타입 단언보다 타입스크립트의 언어지원을 받기에 훨씬 유리합니다.
그 이유에 대한 것은 아래 예제를 보십시오.
interface Person { name: string };
const alice: Person = {} // 오류
const bob = {} as Person // 오류가 아님
|
타입 체커의 기능을 온전히 사용하려면 어떤 방식을 쓰는게 유리한지 이해할 수 있습니다.
타입 선언과 단언의 차이는 속성을 추가할 때도 마찬가지입니다.
interface Person { name: string };
const alice: Person = {
name: 'Alice',
occupation: 'TS dev'
}; // 오류.
const bob = {
name: 'Bob',
occupation: 'TS dev'
} as Person; // 오류 없음.
|
아래는 화살표 함수 사용시 반환 타입을 명시하는 추천되는 방법이다.
const people = ['alice', 'bob', 'jan'].map((name): Person => ({name})); //Person[]
|
아래는 null 아니라는 단언문을 사용하는 예제이다.
const elNull = document.getElementById('test'); // 타입은 HTMLElement | null;
const el = document.getElementById('test')!; // 타입이 HTMLElement
|
요약
* 타입 단언(as Type)보다 타입 선언(: Type)을 사용해야 합니다.
* 화살표 함수의 반환 타입을 명시하는 방법을 터득해야 합니다.
* 타입스크립트보다 타입 정보를 더 잘 알고 있는 상황에서는 타입 단언문과 null 아님 단언문을 사용하면 됩니다.
'IT' 카테고리의 다른 글
Effective Typescript - 11 - 잉여 속성 체크 한계 인지하기 (0) | 2022.01.25 |
---|---|
Effective Typescript - 10 - 객체 래퍼 타입 피하기 (0) | 2022.01.25 |
Effective Typescript - 8 - 타입 공간과 값 공간의 심벌 구분하기 (0) | 2022.01.24 |
Effective Typescript - 7 - 타입이 값들의 집합이라고 이해하기 (0) | 2022.01.24 |
Effective Typescript - 5 - any 타입 지양하기 (0) | 2022.01.24 |