イベントオブジェクトの型が覚えられない人、集合！！

はじめに

はーい！！！私のことです。覚えてないです。
昨日Gatherでformタグのonsubmitに渡す関数が受け取る引数に何の型つけたらええんやってご質問いただきまして、私がいつもどうやって確認しているか共有したのですが、他にも同じ疑問を抱えている方おられると思いまして、ブログにいたします。

VScodeです！！

調べ方

一旦、onSubmitで直接引数受け取ってみます。

↓こんな感じで

<form
    onSubmit={e=>console.log(e)}
    className="mx-2 px-10 py-20 border-2 rounded-lg"
>

そして、eをホバーします。

以上です。
イベントオブジェクトの型はFormEvent<HTMLFormElement>ということが分かりました。

ということは、onSubmitに渡す関数は

const handleSubmit = (e:FormEvent<HTMLFormElement>)=>{
  console.log(e)
}

このように定義したらOKです。

このイベントオブジェクトの型なんやろって思ったらぜひ使ってみてください。

インポートについて

ちなみにFormEventという型はreactからインポートしないといけないので、コピペしたらエラー吐きます。

そんな時、どこからインポートできるか覚えていたら一番いいんですけど、いやそれにしてもわざわざインポート文書くの手間ですよね？？
そんな時は、エラー吐いてるインポートしたい型のところにカーソルおいて、windowsの場合ですがctrl+spaceで候補が出ます。

候補から選択するとインポート文が自動的に出てきます！
ちなみに、インポートしたい型の名前にカーソルを置くときは、その単語の最後の文字のところに置くのがおすすめです。
インポートを自動で行うときに、カーソルの位置から後の文字が自動補完されることがあり、その結果として余計な文字が追加されてエラーが発生することがあるためです。
単語の最後にカーソルを置くことで、このようなエラーを避けることができます。

ctrl+spaceで候補を表示するにはmacの方は設定が必要なんでしょうか・・？
以前mac使っておられる他の方でctrl+spaceでは候補表示されなかったので違うんだなとは思ったのですが、、ごめんなさいわかりません。

おわりに

こんなところに時間かけたくないけど、覚えてないわって感じですよね。
やることは簡単だと思うので毎回過去に書いたところの型を確認しに行ってる方はぜひ参考にしてください。

ライブラリから取得したデータをPropsに渡したい時も同じ手法が使えるので(だいたい独自の型だったりするのでインポートが必要なことが多いイメージ・・)、活用していただけると嬉しいです！！