문제사항
JS에서 DOM method를 사용
다음 자바스크립트 코드는 DOM의 이벤트에 리스너로 받는 코드이다.
const listener=(e : any)=>{
const target = e.currentTarget;
const textNode = target.chilNodes[0];
console.log(textNode.getAtrribute('value');
console.log(textNode.innerText);
console.log(target.style);
}
위의 코드는 아직 아무런 문제점을 일으키지 않는다.
하지만 위의 코드를 typescript로 작성하게 되면 문제가 발생한다.
DOM Type Annotation
위의 코드에서 parameter 부분만 e: Event로 바꾸어보자
const listener=(e : any)=>{
const target = e.currentTarget;
//error : Property 'chilNodes' does not exist on type 'EventTarget'.
const textNode = target.childNodes[0];
console.log(textNode.getAttribute('value');
console.log(textNode.innerText);
console.log(target.style);
}
- 이는
currentTarget이EventTarget인터페이스를 반환하는데, 이 인터페이스에는Node인터페이스에 구현되어 있는childNodes가 없다. - 즉 다시 말해, 상위 인터페이스를 반환을 하여, 하위 인터페이스에 있는 property를 사용하지 못하고 있는 시점이다.
- 그러나, 확실하게 이 리스너가 붙은 DOM은 최소한
HTMLElement를 보장하여,childNodes가 실제로 존재하는 property라고 하자
해결방법
Type Assertion (타입 단언)
- Type assertion 이란 할당하는 변수를 컴파일 단계에서 수동으로 특정 변수에 대해 타입 힌트를 주는 것이다.
const Person = Chulsoo as Huan
console.log(<Person>Jisoo.name)
- 이는 사실
any타입 만큼 최대한 지양해야 하는 부분이다. 타입 추론이라는 강력한 typescript의 기능을 배척하기 때문이다. - 하지만 DOM property를 작성하는데에 있어서 일일이 interface를 작성하여 겹치는 부분만 쓰는것도 귀찮고, 딱히 유지보수에 큰 영향을 끼친다고 볼 수 없다.
- 따라서 해당 DOM이 확실하게 사용하고자 하는 Property를 가지고 있다면, type Assertion을 이용하는 편이 좋다.
위의 문제 예제 코드를 고치게 되면 다음과 같아진다.
const listener=(e : Event)=>{
const target = e.currentTarget as Element;
const textNode = target.childlern[0] as HTMLElement;
console.log(textNode.getAttribute('value');
console.log(textNode.innerText);
console.log(target.style);
}
해당 property를 가지는 DOM의 위치
-
DOM은 아래 그림과 같은 상속 관계를 가진다.
-
따라서
HTMLElement는 모든 Property를 가진다고 볼 수 있다. -
하지만 무작정
HTMLElement로 변환을 하면, 상위 인터페이스로 받아온 DOM임에도 불구하고, 하위 인터페이스에 있는 property를 사용할 지도 모른다. (typescript를 사용하는 의미가 없어짐) -
따라서 MDN 사이트에서 해당 Property를 검색하여, 어떤 종류의 인터페이스에서 해당 Property가 구현되어 있는지 확인하여, 해당 인터페이스까지만 type assertion을 하는 것이 좋다.
-
예를 들어
getAttribute():Element에 구현
innerText:HTMLElement에 구현
참고사이트
Frontend Developer