Property "checked" does not exist on type "EventTarget" 에러 원인과 해결방법

파라미터에 React.MouseEvent<HTMLElement>라고 타입을 지정해줬는데도 이벤트 타겟에 checked 속성이 없다고 에러가 발생했다.

Property “checked” does not exist on type “EventTarget”


error4

console.dir까지 찍어보면 분명히 event.target요소에 checked가 있는데 왜… 에러가 나지??하고 구글링해보니
event target은 기본적으로 타입스크립트의 EventTarget 타입을 가지고 있는데, EventTargetElement로 부터 상속을 받는 것이 아니기 때문에 타입스크립트 입장에선 Element의 id나 class등을 인지 할 수 없는 것이다.

그렇다면 왜 EventTargetElement로부터 상속을 받지 않을까?!
그 이유는 단순히 모든 EventTargetElement란 보장이 되지 않기 떄문이다.
(EventTargetXMLHttpRequest, FileReader, AudioNode, AudioContext 등이 될 수 있음.)

문제를 해결하기 위해선 원문엔

const target = e.target as Element;

이렇게 타입을 지정하라고 했지만 나의 경우엔

const target = e.target as ElementInputElement;

좀 더 디테일하게 적어줘야 에러가 사라졌다.

한줄 요약:
모든 EventTargetElement란 보장이 없으니까 Element의 속성을 타입스크립트가 전부 알아차라지 못한다.


참고한 영어 원문


@Sarah
개인적인 공부를 위해 만든 블로그입니다. 혹시 틀린 점이 있다면 메일로 남겨주시면 감사하겠습니다!

GitHubGmail