イベントの型｜基礎を学ぶ

イベントの引数にも型が要る

検索欄に打った文字を state に入れる。React入門でやったこの書き方は、TypeScript ではそのままだと通りません。

function handleChange(e) {   // e の型が分からないと怒られる
  setKeyword(e.target.value);
}

引数の型が書かれていないので、TypeScript は「これが何なのか分からない」と止めます。厳しく見えますが、e.target.value が本当に取れるのかを確かめるには、e が何かを知る必要があります。

入力欄の変化は ChangeEvent です。どの要素で起きたかを山かっこで添えます。

import { useState, type ChangeEvent } from "react";

function handleChange(e: ChangeEvent<HTMLInputElement>) {
  setKeyword(e.target.value);
}

HTMLInputElement を書いておくと、e.target.value が string として読めます。ここを HTMLFormElement などにすると value が無いと怒られます。どの要素で起きたイベントかまで型に入っているわけです。

type ChangeEvent の type は「これは型だけを持ってくる」という印です。付けなくても動きますが、付けたほうが変換のときに消えるものだとはっきりします。

ボタンを押したときは MouseEvent です。

function handleClick(e: MouseEvent<HTMLButtonElement>) {
  e.preventDefault();
}

ただし引数を使わないなら、書かなくて構いません。

<button onClick={() => setKeyword("")}>消す</button>

引数を受け取るときだけ型が要ると覚えてください。使わないものにまで型を書くと、読む量が増えるだけです。

fleama の検索欄を作ります。打った文字がそのまま下に出るようにします。