TypeScript/TypeScript - 기초부터 실전까지

24. 타입 단언 소개 | 타입 단언 예제

DEV-Front 2023. 10. 14. 22:48
반응형

 

// 타입 단언 (type assertion)
var aaa;
aaa = 20;
aaa = '10';

var b = aaa as string;
  • 이렇게 중간에 a의 타입이 바뀌면 아직 타입스크립트의 방식으로는 타입을 추정할수 없고 추론할 수 없다.
  • 이때 타입추론의 결과는 변수 b도 any로 표시된다. 

 

  • 개발자가 보기에 타입은 string인데 타입스크립트는 추론하지 못한다.
  • 이럴때 as를 쓰면 any 타입은 string으로 바뀌게 된다.

 

  • 이렇게 추정하게되면 변수 b는 string으로 바뀌며 타입 단언된다.
  • 이걸 쓰면 개발자가 타입에 대해 더 정확하게 아니까 타입스크립트 너는 신경쓰지마. 이런 느낌이다.

// <div id='app'>hi/div>

// div가 null 일수있어서 if를 사용한다.
var div = document.querySelector('div');
if(div) { div.innerHTML; } 

// document에 Div라는 엘리먼트가 있을것이다라고 단언한것
var div = document.querySelector('div') as HTMLDivElement;
div.innerHTML;
  • 타입 단언은 DOM API를 조작할때 가장 많이 사용된다.
  • (DOM API 는 웹페이지 태그 정보에 접근하고 조작할 수 있는 API다.)

 

  • div 엘리먼트에 접근했을때 값이 null일 수 도있다고 경고를 주기 때문에 
  • if와 함께 사용했다. 

 

  • 하지만 as 를 사용하면 타입단언 되었기때문에 값에 바로 접근해서 쓸 수 있다.
  • 타입스크립트 보다 개발자가 타입에 대해 정확히 알고있으니까 건들지말란 기능이다.

 

 

반응형