[typescript 기본] 타입 단언 as

타입 단언이란?

타입스크립트보다 개발자가 어떤 타입이 들어올지를 더 잘 알고 있으니 개발자가 정한걸 우선시해라~~ 라고 타입을 정의해놓는 것을 말한다.

 

---

간단한 예제

var a; //이러면 타입은 any가 됨

//...
a = 'stringA'; //a에 문자할당
//...

var c = a; //c는 문자가 된다는 것을 알 수 있음.

a라는 변수를 선언해놓고,
변수 c에 a를 담았을때, c의 타입은 알 수 없는 상태이다.
그러나 중간에 a를 문자열을 담으면 string, 숫자를 담으면 number 등 어떤 것이 나올지 개발자는 알기 때문에 미리 타입을 단언해놓을 수 있다. (아래참고)

 

타입단언 as

var a;  //이러면 타입은 any가 됨

a = 'stringA'; //a에 숫자할당
var c = a as string;

이렇게 타입 단언을 통해서 c에 넣는 a는 string이라는 것을 알려줄 수 있다.

 

---

간단한 예제2

DOM 에도 타입단언을 통해 코드를 줄일 수 있다.

var div = document.querySelector('div'); //마우스 오버해보면 div는 null이거나 HTMLDivElement임!
if (div) { //div가 null 일수도 있기때문에 항상 이렇게 방어코드를 작성해줘야함
    div.innerText = 'zz';
}

우리가 흔히 쓰는 document.querySelector은 null이거나 element를 찾아낸다.
위의 예시를 보면 div를 선언해서 그 div에 innerText로 'zz'라는 문자를 넣을 때,
div가 없을 가능성이 있으니 if문을 이용하여 방어코드를 꼭 삽입해주어야한다. 

이 코드를 타입 단언을 통해 방어코드 없이 작성할 수 있다. (아래참조)

 

타입단언 as HTMLDivElement

var typeDiv = document.querySelector('div') as HTMLDivElement;
typeDiv.innerText = 'zz';

타입단언을 통해 div를 선언하면 해당 태그는 방어코드 없이 작성이 가능하게 된다.