Event Types in React and TypeScript

얼마전 React Typescript Cheatsheet 관련된 글을 포스트 했습니다. 해당 글에서, 아래와 같은 onChange에 관한 타입 정의도 있었습니다. Total Typescript에서 React Typescript의 Event 타입에 대해서만 다루는 글이 있어 소개해보려 합니다.

onChange?: React.FormEventHandler<HTMLInputElement>; // form events! the generic parameter is the type of event.target

 

문제

const onChange = (e) => {};
Parameter 'e' implicitly has an 'any' type.
 
<input onChange={onChange} />;

onChange 뿐만 아닙니다. onClick, onSubmit 과 같은 DOM으로부터 받은 이벤트 핸들러들에게 있어 e에 어떤 타입을 줘야할지 명확하지 않습니다. 헷갈립니다. 하지만 다양한 해결책을 소개해드리겠습니다.

 

해결1: 타입에 마우스 호버해보기

<input onChange={onChange} />;
// (property) React.InputHTMLAttributes<HTMLInputElement>.onChange?: React.ChangeEventHandler<HTMLInputElement> | undefined

어떤 타입이 들어오는지 마우스를 호버해보는겁니다. 그러면 위에서 알려준 힌트를 토대로 다음과 같이 정의할 수 있습니다.

import React from "react";
 
const onChange: React.ChangeEventHandler<
  HTMLInputElement
> = (e) => {
  console.log(e);
};
 
<input onChange={onChange} />;

만약 Inline function 또는 Type 이벤트를 선호한다면 다음과 같이 정의할 수 있습니다.

<input onChange={(e: React.ChangeEvent<HTMLInputElement>) => {}} />

 

해결2:  React.ComponentProps

React.ComponentProps를 사용한다면 조금 미세하지만 빠른 타입을 지정하는데 도움이 됩니다.

import React from "react";
 
const onChange: React.ComponentProps<"input">["onChange"] =
  (e) => {
    console.log(e);
  };
 
<input onChange={onChange} />;

다음과 같이 지정한다면, input 컴포넌트 props에서 onChange property를 가져오겠다는 말입니다. 마우스 hovering 없이, 그리고 큰 고민 없이 ComponentProps의 존재를 알고 있다면 사용할 수 있습니다.

 

해결3:  EventFrom

위의 방법도 충분히 좋았지만 e에 직접 타입을 지정할 수 없습니다. 만약 타입만을 추출해서 e에 직접 타입을 지정하려면 어떻게 할 수 있을까요? Parameters와 NonNullable 그리고 Indexed Access의 조합으로 다음과 같이 정의할 수 있습니다.

import React from "react";
 
const onChange = (
  e: Parameters<
    NonNullable<React.ComponentProps<"input">["onChange"]>
  >[0]
) => {};

하지만 코드가 너무 길죠, 앞으로 EventFrom이라는 타입을 만들고 사용해보겠습니다.

type GetEventHandlers<
  T extends keyof JSX.IntrinsicElements
> = Extract<keyof JSX.IntrinsicElements[T], `on${string}`>;
 
/**
 * Provides the event type for a given element and handler.
 *
 * @example
 *
 * type MyEvent = EventFor<"input", "onChange">;
 */
export type EventFor<
  TElement extends keyof JSX.IntrinsicElements,
  THandler extends GetEventHandlers<TElement>
> = JSX.IntrinsicElements[TElement][THandler] extends
  | ((e: infer TEvent) => any)
  | undefined
  ? TEvent
  : never;

const onChange = (e: EventFor<"input", "onChange">) => {
  console.log(e);
};
 
<input onChange={onChange} />;

 

어떤 방법을 사용할까요?

위 저자는 함수에 타입을 정의하는 EventFor를 선호한다고 합니다. 함수가 아닌 이벤트에 타입을 정의할 수 있고, 자동 완성을 제공하기 때문이죠. 여러가지 방법을 알게 돼서 기호에 맞게 사용할 수 있지만 저는 해결2와 해결1의 조합을 사용할거 같습니다.

 

 

참조

https://www.totaltypescript.com/event-types-in-react-and-typescript