[TypeScript] DOM Element

 

타입스크립트에서는 DOM 엘리먼트의 계층 구조를 파악하기가 용이하다.

Element와 EventTarget에 달려 있는 Node의 구체적인 타입을 안다면 타입 오류를 디버깅 할 수 있고, 언제 타입 단언을 사용해야 할 지 알 수 있다. (일반적으로 타입 단언은 지양하는게 좋지만, DOM 관련해서는 타입스크립트보다 우리가 알고있는게 더 명확하므로 사용해도 된다.)

 

 

◽ dom 계층의 타입들

타입	예시
EventTarget	window, XMLHttpRequest
Node	document, Text, Comment
Element	HTMLElement, SVGElement
HTMLElement	<i>, <b>
HTMLxxxElement	<button>: HTMLButtonElement <p>: HTMLParagraphElement

 

 

 

◽ Event

Event 타입은 가장 추상화된 이벤트로, 더 구체적인 타입을 지정해주는 것이 좋다.

구체적인 타입 종류: UIEvent, MouseEvent, TouchEvent, WheelEvent, KeyboardEvent

 

handleDrag(eDown: Event) {
  // Error: Event에 clientX 속성이 없습니다. Event에 clientY 속성이 없습니다.
  const dragStart = [dDown.clientX, dDown.clientY]
},

 

 

 

 

---

 

 

 

출처

댄 밴터캄, 이펙티브 타입스크립트 (프로그래밍 인사이트, 2021)

 

 

 

---

개인적으로 공부한 내용을 정리하는 블로그로
잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.