타입 단언과 타입 선언 사용 시기

타입 단언, 타입 선언

interface Person {name: string};

const alice: Person = { name: 'Alice' } // Person 타입 (타입 선언)
const alice = { name : 'Alice' } as Person // Person 타입 (타입 단언)

두 가지 방법은 결과가 같아보이지만 그렇지 않다.

첫 번째 방법은 변수에 타입을 붙여 타입을 선언한 것이고,

두번째는 as Person으로써 타입을 단언한 것이다.

 

 

타입 선언은 타입 체커가 동작한다.

const alice: Person = {}; // -- 타입 에러

const bob = {} as Person; // 오류 없음

타입 선언은 할당되는 값이 해당 인터페이스를 만족하는지 검사한다.

앞의 예제에서는 alice의 값이 인터페이스를 만족시키지 못하므로 타입 체커가 에러를 잡아낸다.

타입 단언은 강제로 타입을 지정했으므로, 타입 체커에게 오류를 무시하라고 하는 것이라 아무런 오류가 나지 않는다.

 

화살표 함수 타입 추론

const people = ['alice', 'bob', 'jan'].map(name => ({name}));
// Person[]일 줄 알았으나, 결과는 {name : string}[]

const people = ['2dc', '3dc', '4dc'].map(name => ({name} as Person));
// 결과 : Person[] 이지만 런타임에서 오류가 날 수 있다. (타입 체킹이 안되기 때문)

 

화살표 함수에서는 단언문을 사용하지 않고, 화살표 함수 내부에서 타입과 함께 변수를 선언하는 것이 가장 직관적이다.

const people: Person[] = ['2dc', '3dc', '4dc'].map((name): Person => ({name}));

 

타입 단언이 필요한 경우

개발자가 추론하는 타입이 타입 체커가 추론하는 타입보다 훨씬 나을 때가 있다.

대표적으로 DOM 엘리먼트에 대해서는 개발자가 추론하는 타입이 타입체커보다 더 정확하다.

document.querySelector('#buttonId').addEventListener('click', (e) => {
	e.currentTarget // 타입은 EventTarget
	const button = e.currentTarget as HTMLButtonElement; // 이게 더 정확
})

 

요약

• 타입 단언(as Type)보다 타입 선언(: Type)을 사용해야 한다.
• 화살표 함수의 반환 타입을 명시하는 방법을 터득해야 한다.
• 타입스크립트보다 타입 정보를 더 잘 알고 있는 경우, 타입 단언문과 ! (not null) 단언문을 사용할 수 있다.