[타입스크립트 입문 - 기초부터 실전까지] 타입 단언

EJ·2020년 11월 25일
0

Typescript

목록 보기
14/25
post-thumbnail

타입 단언(type assertion)

타입스크립트보다 개발자가 타입을 더 잘 알고있으니, 개발자가 정의한 타입으로 간주하도록 하는 것이 타입 단언이다.

DOM API를 조작할 때 가장 많이 사용하게 된다.

// 타입 단언(type assertion)
var a;
a = 20;
a = 'a';
var b = a; // b: any
  • a의 값을 중간에 바꿔도 현재의 타입스크립트 추론방식으로는 맨 처음 선언된 a의 타입이 추론된다.
  • 따라서, 원하는 타입으로 정의하고 싶을 경우 타입 단언을 사용하면 된다.
var b = a as string;

as 타입을 적어줌으로써 작성한 타입으로 정의한다.


타입 단언 예제

DOM API웹페이지의 태그 정보를 접근하고 조작할 수 있는 API이다.
document.querySelector();이 DOM API에 속한다.

as HTMLDivElement

var div = document.querySelector('div'); // var div: HTMLDivElement
if (div) {
	   div.innerText
}
  • document.querySelector로 접근하는 시점에 div가 있다는 보장이 없기 때문에, div가 존재하는지 확인을 한 후에 접근을 하도록 해줘야 한다.
  • div가 존재하는지 확인을 '타입 단언'을 이용하면 간편하다.
var div = document.querySelector('div') as HTMLDivElement;
div.innerText;
  • as를 이용해 단언을 해줘 해당 DOM API 조작시 바로 접근이 가능해 진다.
profile
주니어 프론트엔드 개발자 👼🏻

0개의 댓글