【React×TypeScript】イベントハンドラの型

はじめに

const handleChange = (event) => {
    console.log(event);
    console.log(event.target.value);
};

return <input type="text" onChange={handleChange} />;

こちらはReact×TypeScriptの環境で、フォームのonChange時にhandleChangeというイベントハンドラが発火するようにしています。
一応動きますが、引数eventで以下のエラーが出てしまいます。

Parameter 'event' implicitly has an 'any' type.

引数eventに型が必要なようです。
any型は避けて、以下の型注釈をすることでエラーを解消できます。

const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    console.log(event);
    console.log(event.target.value);
};

解消はできましたが、よくわからなかったのでReact.ChangeEventとHTMLInputElementについて、それぞれまとめます。

React.ChangeEventとは

React.ChangeEventとは、フォームの値が変更された時に発生するイベントに関連するオブジェクトです。
エディター上でcommand+クリックで辿っていくと、SyntheticEventを継承し、さらに辿るとBaseSyntheticEventを継承していることがわかります。

React.ChangeEventはtargetやtypeなどのプロパティを持っています。
これらのプロパティは、上述したサンプルコードでconsole.logしているeventオブジェクトにもあります。
このことからeventの型にReact.ChangeEventを設定できることがわかります。

HTMLInputElementとは

HTMLInputElementとは、input要素に関するプロパティやメソッドを提供するHTML DOM APIの一つです。
今回はReact.ChangeEventのジェネリクスに設定しています。
コードを辿っていくと、ChangeEventのtargetプロパティに、HTMLInputElementを設定していることがわかります。

index.d.ts

interface ChangeEvent<T = Element> extends SyntheticEvent<T> {
    target: EventTarget & T;
}

そこで試しにジェネリクスの箇所を削除してみると、target.valueで以下のエラーが出ます。（eventでは出ません）

const handleChange = (event: React.ChangeEvent) => {
	console.log(event);
	console.log(event.target.value);
};

Property 'value' does not exist on type 'EventTarget & Element'.

このことから、onChangeイベント時に入力値（target.value）にアクセスしたい場合、HTMLInputElementの設定が必要であることがわかります。

まとめ

以上のことから、onChange時に発火するイベントハンドラの引数にはReact.ChangeEvent<HTMLInputElement>の型注釈が必要であることがわかりました。

また、このようなイベントハンドラの型はエディター上から手軽に探ることができます。
まず以下のように記述します。

<input type="text" onChange={(event) => {}} />

続いてeventの箇所にホバーすることでヒントを得ることができます。

参考記事

採用のお知らせ

株式会社Relicでは、エンジニア・デザイナーを積極的に採用中です。
またRelicでは、地方拠点がありますので、U・Iターンも大歓迎です！🙌
少しでもご興味がある方は、Relic採用サイトからエントリーください！