[TS] change, submit e매개변수 type, onChange type (feat.Type보는 방법)

Input 과 textarea 안에 들어가는 value를 이용해서 setState를 시켜주는 useHook을 작성 중 ts로 변환하려고 한다.

change Event의 매개변수로 e 에 대한 type을 작성할 때는

 아래와 같이 작성한다.

(e: React.ChangeEvent<HTMLInputElement>)

 

나는 input과 textarea가 동시에 쓰여서 다음과 같이 작성했다.

e: React.ChangeEvent<HTMLInputElement> | React.ChangeEvent<HTMLTextAreaElement>

 

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

 

+ submit 의 e 매개변수는 아래와 같다.

import React, { FormEvent} from 'react';
...

(e: FormEvent<HTMLFormElement>)

 

위 코드를 import하지 않고 그냥 아래처럼 써도 됨

(e: React.FormEvent<HTMLFormElement>)

 

 

---

+ onChange의 type

interface를 작성 중 onChange를 원래  아래와 같이 작성하였으나 다른 파일에서 사용시 에러가 났다.

onChange: () => void;

아래와 같이 상세하게 설정해주자 적용이 되었다.

interface InputProps {
  value: string | number;
  ...
  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
}

 

---

이에 대해 아래 방법은 여기 블로그에서 )

https://merrily-code.tistory.com/157

타입스크립트에서 이벤트 객체 타입 지정하기

 

이걸 도대체 어떻게 알까 싶지만, 사실 여기에는 규칙이 하나 있습니다.

이벤트에도 마우스 클릭, 키보드 키 누르기 등등 여러 종류가 있음은 아실텐데요, 이 중에서 사용할 이벤트와 일치하는 이벤트를 선택합니다.

React.Event를 치고 코드 자동완성을 시도하면 적용할 수 있는 이벤트의 목록이 나타납니다.

위 코드에서는 onChange 이벤트를 활용하려 하니, 이벤트 타입 목록 중에서 ChangeEvent를 선택합니다.

const onChangeEmail = (e: React.ChangeEvent) => {
  setEmail(e.target.value);
};

<input onChange = {onChangeEmail} type = "email"/>

다음으로는 제네릭을 통해 이벤트를 활용하는 HTML 노드의 타입을 지정해줍니다.

HTML까지 치고 코드 자동완성을 시도하면 HTML 요소 타입 목록이 나타납니다.

input 태그에서 onChange 이벤트를 사용하려 하니, HTMLInputElement 라는 타입을 찾아 제네릭으로 전달합니다.

const onChangeEmail = (e: React.ChangeEvent<HTMLInputElement>) => {
  setEmail(e.target.value);
};

<input onChange = {onChangeEmail} type = "email"/>

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

📝 요약

• 이벤트 인자 타입을 지정하려면 먼저 이벤트의 타입을 찾으셔야 합니다.
• 이벤트의 타입을 찾았다면, 해당 이벤트를 발생시키는 요소를 제네릭 인자로 전달하세요!