타입 단언 : 내가 너보다 많이 알아!
타입단언은 타입스크립트보다 개발자 본인이 더 타입을 명확히 알고 있으며
타입스크립트가 타입 정의를 잘 못하고 있을 때, 개발자가 타입을 주입시켜 주는 행위를 말한다.
위 상황에서 개발자인 우리는 index.html에 input과 button 엘리먼트가 각각 존재하고,
위 코드와 알맞는 id를 가지고 있는 것을 알 수 있다.
하지만 타입스크립트는 오류를 내뿜는다.
이유는 타입스크립트가 btn과 input이 HTMLElement라는 것을 document.getElementById를 통해서 알고는 있지만
HTMLElement에는 value라는 프로퍼티가 없기 때문에 오류를 내뿜는 것이다.
하지만 input의 타입은 HTMLElement가 아니다.
그렇다면 어떤 타입인지 한 번 확인해보자.
input은 HTMLElement가 될 것이 아니라, HTMLInputElement 타입이어야 제대로 동작할 것이라고 생각할 수 있다.
실제로 lib.dom.d.ts에서는 HTMLElement가 확장된 HTMLInputElement 인터페이스가 존재한다.
그리고 value 프로퍼티도 가지고 있다.
그렇다면 input이 HTMLInputElement여야 함을 우리가 알고 있으니
이 타입을 ts에 강제로 단언해주자.
방법은 어렵지 않다.
우리가 사용할 const input에 as HTMLInputElement 처럼 선언해줌으로써
이제 input은 개발자가 정의하는 명확한 타입을 가지게 되었다.
타입이 영 애매하고 어떤 것을 쓸 지 모르겠다면
console.dir로 찍거나
DOM의 프로토타입을 한번 공부해보는 것도
괜찮은 방법인 것 같다.
'Typescript' 카테고리의 다른 글
| 타입 단언과 타입 선언 사용 시기 (0) | 2023.07.27 |
|---|---|
| (TS) TodoList 작성과, interface, type assert에 대한 내 생각 (0) | 2023.03.12 |
| (TS) non null / optional chaning (0) | 2023.03.11 |
| (TS) tsconfig / lib (0) | 2023.03.11 |
| (TS) document interface (0) | 2023.03.09 |
