본문 바로가기

IT

Effective Typescript - 9 - 타입 단언보다는 타입 선언을 사용하기

아래 예제는 변수를 할당 할 때, 타입 단언과 타입 선언을 사용하는 코드입니다.

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 아님 단언문을 사용하면 됩니다.