[Typescript] Property 'value' does not exist on type 'EventTarget'.

[beecomci]

이슈

const onChange = (event: React.FormEvent<HTMLInputElement>) => {
    const {
      target: { value }
    } = event;

    setValue(value);
  };

return (
    <div>
      <form onSubmit={onSubmit}>
        <input
          type="text"
          value={value}
          onChange={onChange}
          placeholder="username"
        />
        <button>Log in</button>
      </form>
    </div>
  );

• React Masterclass를 듣는 중, 강사님이 Typescript에서는 currentTarget을 사용하래서 왜 그런지 궁금해 찾게됨
• 실제로 event.currentTarget 대신 늘 하던대로 event.target에서 value를 가져오니 다음과 같은 오류 발생
  • Property 'value' does not exist on type 'EventTarget'.
  • target : 실제 이벤트가 발생하는 요소
  • currentTarget : 이벤트가 걸린 요소
• 궁금해서 중간에 console로 정말 event.target에 value가 없나 싶어 찍어봤지만, 존재함.. 그럼 왜?

원인

• https://www.designcise.com/web/tutorial/how-to-fix-property-does-not-exist-on-type-eventtarget-typescript-error
• event.target은 기본적으로 Typscript의 EventTarget 타입을 갖고 있는데, EventTarget 타입이 Element 타입을 상속받지 않기 때문에 Typescript 입장에서는 Element의 id, class 등의 속성을 알아차리지 못함

그럼 왜 EventTarget 타입은 Element 타입을 상속받지 않나 ?

• 모든 EventTarget이 HTML elements라는 보장이 없기 때문
• EventTarget은 XMLHttpRequest, FileReader, AudioNode, AudioContext 등이 될 수 있음

해결 방안

1. Typescript에게 EventTarget의 정확한 타입 설명

const onChange = (event: React.FormEvent<HTMLInputElement>) => {
    const target = event.target as HTMLInputElement;

    setValue(target.value);
  };

• 원문에서는 HTMLElement만 지정해줘도 된다지만, 난 정확한 타입을 지정해줘야 오류가 사라졌음

2. currentTarget

• target과 currentTarget이 동일하다면, 강사님처럼 currentTarget으로 대체 사용 가능