(TS) 타입 단언 (Type Assertion)

타입 단언 : 내가 너보다 많이 알아!

타입단언은 타입스크립트보다 개발자 본인이 더 타입을 명확히 알고 있으며

타입스크립트가 타입 정의를 잘 못하고 있을 때, 개발자가 타입을 주입시켜 주는 행위를 말한다.

 

id로 todoinput과 btn이 있다.

index.ts는 오류를 낸다.

위 상황에서 개발자인 우리는 index.html에 input과 button 엘리먼트가 각각 존재하고,

위 코드와 알맞는 id를 가지고 있는 것을 알 수 있다.

 

하지만 타입스크립트는 오류를 내뿜는다.

이유는 타입스크립트가 btn과 input이 HTMLElement라는 것을 document.getElementById를 통해서 알고는 있지만

HTMLElement에는 value라는 프로퍼티가 없기 때문에 오류를 내뿜는 것이다.

 

input을 HTMLElement 또는 null로 알고 있다.

 

하지만 input의 타입은 HTMLElement가 아니다.

그렇다면 어떤 타입인지 한 번 확인해보자.

 

해당 input의 dir를 따고 맨 아래를 보면

input은 HTMLInputElement 타입이어야 함을 알 수 있다.

 

input은 HTMLElement가 될 것이 아니라, HTMLInputElement 타입이어야 제대로 동작할 것이라고 생각할 수 있다.

 

실제로 lib.dom.d.ts에서는 HTMLElement가 확장된 HTMLInputElement 인터페이스가 존재한다.

value 프로퍼티의 타입은 string이다.

그리고 value 프로퍼티도 가지고 있다.

 

그렇다면 input이 HTMLInputElement여야 함을 우리가 알고 있으니

이 타입을 ts에 강제로 단언해주자.

 

방법은 어렵지 않다.

as 로 타입 단언을 해준다.

우리가 사용할 const input에 as HTMLInputElement 처럼 선언해줌으로써

이제 input은 개발자가 정의하는 명확한 타입을 가지게 되었다.

 

---

타입이 영 애매하고 어떤 것을 쓸 지 모르겠다면

console.dir로 찍거나

DOM의 프로토타입을 한번 공부해보는 것도

괜찮은 방법인 것 같다.