【全解説】React + TypeScriptのイベント型の書き方3パターン
2024.3.19
2026.3.29
この記事は約2分で読めます
3種類あるReact + TypeScriptのイベント型記法。
①インライン横 ②パラメータ横 ③関数名横
違いと使い分けをサクッと紹介します。
目次
• 3種類の型の記法
筆者：三好アキ（専門用語なしでプログラミング）
▶︎ 三好アキの著書一覧はこちら
3種類の型の記法
React + TypeScript開発で使うイベントの型の記法には、次の3つがあるので紹介します。
1：インライン記法
2：パラメータ横に書く記法
3：イベント名の横に書く記法
１インライン記法（React + TypeScriptのイベントの型）
次のようなコードがあったとします。
// Form.tsx
const Form = () => {
const [data, setData] = useState("")
return (
<form>
<input onChange={(e) => setData(e.target.value)}
type="text"
required
/>
</form>
)
}
export default Formfunctionを内部に書くこのようなインライン記法では、eに対する型は不要です。
マウスをeに乗せると、TypeScriptが次のように型の推測をしてくれています。
▶︎▶︎ https://monotein.com/present-for-readers
２パラメータ横に書く記法（React + TypeScriptのイベントの型）
先ほどのインラインのfunctionを、外部定義するものに変えてみましょう。
// Form.tsx
import { useState } from "react"
const Form = () => {
const [data, setData] = useState("")
const changeHandler = (e) => {
setData(e.target.value)
}
return (
<form>
<input onChange={changeHandler}
type="text"
required
/>
</form>
)
}
export default Formするとeはanyになります。
しかし、先ほどのインライン記法時の型情報を次のように持ってくれば解決します。これが2つ目の記法です。
// Form.tsx
...
const changeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
setData(e.target.value)
}
return (
...３名前の横に書く記法（React + TypeScriptのイベントの型）
次のように書くこともできます。これはeなどのパラメーターが複数あるときに便利な記法です
// Form.tsx
...
const changeHandler: React.ChangeEventHandler<HTMLInputElement> = (e) => {
setData(e.target.value)
}
return (
...本記事で紹介した3つの記法はどれを使っても違いはありませんが、3つ目の記法を目にすることあまりないでしょう。
✤ 筆者 ✤
三好アキ（専門用語なしでプログラミング）
「専門用語なし」のメソッドで1,200人以上のビギナーをフロントエンド開発入門に成功させる。翔泳社『動かして学ぶ！Next.js/React開発入門』（韓国でも出版）など著書25冊以上。Amazonベストセラー1位複数回獲得。
React、Next.js、TypeScriptなどの最新情報や初心者向けコンテンツを、無料メルマガ配信中。メールアドレスだけで登録可 ▶︎ 無料メルマガ登録