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が次のように型の推測をしてくれています。

２パラメータ横に書く記法（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つ目の記法を目にすることあまりないでしょう。

2024年3月にReact + TypeScriptの新刊書をリリースしました。

ジェネリクスを含む、基礎から応用までの幅広い範囲をカバーしており、TypeScript + React入門者から、中級者の人にもっとも学びがある内容になっています。

https://monotein.base.shop/p/00002