개요

event.target.value를 얻으려면 TypeScript에 욕을 먹게 되므로 이벤트.나는 target을 다시 조사했다.
소스 예제는 React+TypeScript로 작성됩니다.

오류 예제

function Example() {
  const event = (event: React.KeyboardEvent<HTMLInputElement>) => {
    console.log(event.target.value); // ここで怒られる
    // プロパティ 'value' は型 'EventTarget' に存在しません。ts(2339)
  };

  return (
    <div>
      <input type="text" onKeyDown={event} />
    </div>
  );
}

Event Target은 Element뿐만 아니라 윈도우 등도 목표가 될 수 있기 때문에 오류를 토한 것 같습니다.
MDN | EventTarget
요소와 모양, 창은 가장 흔히 볼 수 있는 이벤트 목표이지만 다른 대상도 이벤트 목표이다.예를 들어 XMLHttpRequest, AudioNode, AudioContext 등이다.

해결 방법

해결 방법 1

const event = (event: React.KeyboardEvent<HTMLInputElement>) => {
    console.log((event.target as Element).value); 
    // キャストすることで無理やり Element とする
  };

event.target를 Element 역할로 설정하여 오류를 강제로 제거합니다.
잘못은 사라지지만 느낌이 좋지 않다.

해결 방법 2

const event = (event: React.KeyboardEvent<HTMLInputElement>) => {
    console.log(event.currentTarget.value); 
    // currentTargetを使用する
  };

currentTarget을 사용하여 오류를 제거합니다.
하지만 current Target은 무엇입니까?
다음은 target과currentTarget의 차이를 볼 수 있습니다.

target과currentTarget의 차이

코드 샌드박스에 실험례를 놓았습니다.
https://codesandbox.io/s/event-target-yzz1i

위의 설명에서 잠금 이벤트를 대상으로 파란색 상자에 추가하고, 하위 요소의 노란색 상자를children으로 추가합니다.
event.target과 이벤트.다른 currentTargettarget 호출 이벤트 요소 참조currentTarget 이벤트 프로세서가 부착된 요소를 참조하는 것 같습니다.
이에 따라 target 변화가 있었고 currentTarget 변화가 없었다.

참고 자료

MDN | Event.target
MDN | Event.currentTarget
MDN | EventTarget
stack overflow | Why is Event.target not Element in Typescript?