【全解説】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 Form

functionを内部に書くこのようなインライン記法では、eに対する型は不要です。

マウスをeに乗せると、TypeScriptが次のように型の推測をしてくれています。

⚫︎ monotein.base.shop/p/00005

２パラメータ横に書く記法（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 (
        ...