"Property '...' does not exist on type 'EventTarget'" in TypeScript

타입스크립트를 사용하면서, event target에 접근하다 위와 같은 에러를 만나게 되었고, 어떻게 해결할 수 있었는지 기록하고자 한다.

 

Error

내가 만나게 됐던 에러는 Property 'classList' does not exist on type 'EventTarget'. 이었다.

 

Drag Drop 이벤트를 혼자 구현해보다가 아래처럼 작성했었다. 

드래깅 되는 타겟에 내가 원하는 CSS효과를 주려고 아래처럼 접근하니, classList라는 property가 없다는 에러를 만나게 됐다.

//Drag Event
  const onDragStartHandler = (
    e: React.DragEvent<HTMLDivElement>,
    idx: number
  ) => {
    const target = e.target;
    target.classList.add('lifted');
    setDraggingItem(idx);
  };

 

 

 

Solution

해결 방법은 매우 간단하다. 

TS가 위와 같은 에러메시지를 내뱉는 것은 event.target이 우리는 HTMLDIvElement인 것을 알지만, TS는 모르기 때문이다. 

따라서, type을 캐스팅 해주는 방식으로 해결 할 수 있었다. 

  //Drag Event
  const onDragStartHandler = (
    e: React.DragEvent<HTMLDivElement>,
    idx: number
  ) => {
    const target = e.target as HTMLDivElement;
    target.classList.add('lifted');
    setDraggingItem(idx);
  };

 

 

위 처럼 as를 통해 타입을 캐스팅 하여 해결 할 수 있었다.

 

 

마무리

타입 스크립트를 쓰다보면 좋다고 생각하다가도, 익숙치 않은 에러를 만나게 되면 귀찮음을 느끼게 되는 것 같다...

에러메시지를 잘 참고하면서 얼른 익숙해 지자!