TS #9 : 타입 단언보다는 타입 선언 사용하기

타입 단언보다는 타입 선언 사용하기

typescript에서 변수에 값을 할당하고, 타입을 부여하는 방법은 두가지가 있다.

type Person = { name: string };

const alice: Person = { name: 'Alice' };
const bob = { name: 'Bob' } as Person;

첫번째 방법은 alice: Person 변수에 '타입 선언'을 붙여서 그 값이 선언된 타입을 명시한다.
두번째 as Person은 '타입 단언'을 수행한다. '타입 단언'을 사용하게 되면 타입스크립트가 추론한 타입이 있더라고 Person 타입으로 간주하게 된다.

const alice: Person = {}; // error
const bob = {} as Person; // no error

타입 선언으로 만들게 되면 할당된느 값이 해당 타입, 인터페이스를 만족하는지 확인해서 에러를 발생시킨다.
뒤에 있는 타입 단언과 같은 경우에는, 강제로 타입 지정을 했으니 타입 체커에게 오류를 무시하라고 하기 때문에 오류가 발생하지 않는다.

위와 같은 이유로, 타입 단언보다는 선언이 타입스크립트 안정성에 더 부합하다.

const bob = <Person>{} 

위와 같은 코드는 단언문의 기존 문법인데, 리액트에서는 컴포넌트 태그로 인식되기 때문에 사용하지 않는다.
타입스크립트를 공부해서 결국 사용 할 곳이 React이기 때문에 타입 단언은 사용하지 않는 방향으로 항상 진행하는게 좋을 것 같다.

코드를 짜다보면, chaining 코드를 많이 작성하게 되는데 이때도 주의해서 짜야한다.

const people: Person[] = ['alice', 'bob', 'jan']
	.map((name): Person => ({name})); // 타입은 Person[]

만일, chaining이 연속적으로 일어나는 경우라면, 체이닝 시작에서부터 명명된 타입을 가져야 오류를 한눈에 보기게 쉽다.

타입 단언이 반드시 필요한 부분이 있는데, 해당 부분은 보통 DOM에 접근 하는 경우이다.

타입스크립트에서는 DOM에 접근 할 수 없기 때문에, DOM에 대해서는 타입 체커보다 개발자가 더 잘 아는 경우가 많다. 해당 경우에는 타입 스크립트보다 더 많은 정보를 가지고 있기 때문에 타입 단언을 사용하는 것이 타당하다.

const elNull = document.getElementById('foo');
const el = document.getElementByid('foo')!;

elNull은 해당 element가 존재하지 않을 경우도 있기 때문에, 타입이 HTMLElement | null 이지만, 뒤의 경우 !가 접미사로 사용되었기 떄문에 null인 경우를 제외하고 HTMLElement가 타입이 된다.

위와 같이 DOM에 대한 접근을 하는 경우가 아니라면, 타입 선언을 항상 사용해야 한다.