【React×TypeScript】Clickイベントの型の指定

Clickイベントで型を指定する

ReactやTypeScriptの扱いに慣れていない頃は、型の指定って迷いますよね・・！

今回は、ReactでClickイベントでの型を指定する方法について書いていきたいと思います。

Buttonクリックだと、React.MouseEvent<HTMLButtonElement, MouseEvent>となります！

const buttonClick = (
  event: React.MouseEvent<HTMLButtonElement, MouseEvent>
) => {
  .
  .
};

TableRowクリックだと、React.MouseEvent<HTMLTableRowElement, MouseEvent>となります。

  const tableRowClick = (
    event: React.MouseEvent<HTMLTableRowElement, MouseEvent>
  ) => {
    console.log(event);
  };

Changeイベントで型を指定する時も迷うことがありますよね！

その際の型の指定方法は、以下の記事へまとめています！

ReactのPropsに関数の型を指定する際の方法については、以下の記事へまとめていますので確認してみてください！

今回は、ReactとTypeScriptでのClickイベントの型の指定方法について紹介しました。

ReactやTypeScriptは慣れると非常に効率的にプログラミングができるようになりますが、それまでは結構扱いが難しいですよね！

フロントエンドではTypeScriptを使用した開発が主流になりつつあるので、早めにマスターして使いこなせるようにしていきましょう！