[에러 일지] TypeScript - Type Assertion으로 'Property does not exist...' - ts(2339) 오류 해결하기

타입스크립트에서는 DOM 다루기가 까다롭다. 타입을 지정해주지 않으면 오류를 뿜어내는 경우가 많기 때문이다. 타입의 위계가 정해져 있으며, 자세히는 아니라도 오류를 이해하기 위해 이를 살펴볼 필요가 있다. 각 타입마다 존재하는 프로퍼티가 다르기 때문이다.

다만, React에서 직접 DOM을 다루는 것은 잘못된 방식이다.

Element 타입 위계

EventTarget <- Node <- Element <- HTMLElement

예시

vedio Element 위계 : EventTarget <- Node <- Element <- HTMLElement <- HTMLMediaElement <- HTMLVedioElement

관련 오류

querySelector 함수의 결괏값은 'Element' 타입이라는 점에 주의하며 아래 예제를 살펴보자.

const ele = document.querySelector('.container');

ele.style.height = "300px";
ele.innerHTML = "컨테이너입니다."

자바스크립트에서는 오류가 나지 않지만, 아마 타입스크립트에서는 아래와 같은 오류를 내뱉을 것이다.

🚫 Property 'style' does not exist on type 'Element'

🚫 Property 'innerHTML' does not exist on type 'Element'

해결

Element 타입에는 해당 프로퍼티가 없다는 오류이다. style, innerHTML 등의 프로퍼티는 HTMLElement에 존재한다.
따라서, 타입 표명(Type Assertion)을 해주어야 한다. 타입 표명을 하기 위해서 as 키워드를 사용한다.

const ele = document.querySelector('.container') as HTMLElement;

만약, 이벤트가 걸려있는 Element라면 아래와 같이 이중 표명(Double assertion)을 해주어야 한다.

const toggleHandler = (event: Event) => {
  let ele = event as any as HTMLElement;
}

Event 타입 위계

Event 타입의 기본 위계는 아래와 같다.

Event <- UIEvent

예시

마우스 이벤트 위계 : Event <- UIEvent <- MouseEvent
인풋 이벤트 위계 : Event <- UIEvent <- InputEvent

이중 표명으로 이벤트 타입 정의하기

해당 이벤트를 상세히 정의하기 위해 이중 표명을 사용한다.

const toggleHandler = (event: Event) => {
  let mouseEvent = event as MouseEvent;
}

---

참고

📎 타입 표명(Type Assertion)

📎 Event 타입 위계

📎 DOM, Event 타입 정의