[TypeScript] 🐳 "e.target.value" error 해결.

목차

TypeScript에서 "e.target.value" 에러 해결하기

타입스크립트로 리액트 프로젝트를 진행하다 보면 가장 난감한 것 중 하나가 바로 DOM과 관련된 부분이다. 왜냐하면 문자열이나 정수, 객체 정도는 원시 타입이나 인터페이스로 해결할 수 있지만 DOM은 HTMLInputElement같은 특이한 타입들이 존재하기 때문이다.

 

아마 e가 정확히 어떻게 생겼는지 알 수 없으니 any 타입을 사용하는 경우도 있지만, 정확하게 사용하고 싶다면 React.ChangeEvent<HTMLInputElement>을 사용하면 된다.

 

이런 타입 방식을 사용하는 이유는 자바스크립트 이벤트에는 마우스 클릭, 키보드 키 누르기 등등 여러 종류가 있기 때문이다. 이런 이벤트들 중에서 "사용할 이벤트와 일치하는 이벤트"를 알면 리액트 프로젝트에서 어떤 것을 사용해야 할지를 알 수 있다.

 

만약 input 태그가 아니라 textArea 태그에서 사용하려 한다면 제네릭 인자를 HTMLTextAreaElement로 바꿔주면 되며, onChange 이벤트가 아니라 마우스 클릭 이벤트라면 이벤트 타입을 React.MouseEvent<클릭할 요소 타입> 이런 식으로 바꿔주시면 된다.

---

실제 사용 예제

e.target.value를 리액트 타입스크립트 프로젝트에서 실제로 사용하는 예제이다.

TypeScript

function getNumber(e: MouseEvent<HTMLButtonElement>) {
  setCalc((prev) => prev + (e.target as HTMLTextAreaElement).value);
  setOperation(true);
};

TypeScript

e: React.ChangeEvent<HTMLInputElement>

---

참고 문헌

• 1타입스크립트에서 이벤트 객체 타입 지정하기
• 2[TypeScript] e.target.target 타입 에러가 나는 이유 ts(2339)
• 3리액트 + 타입스크립트 (React + TypeScript): HTML 요소, 폼의 이벤트 처리