Zenn
Open1

TypeScriptでイベントハンドラーの型定義の機械的方法

TypeScript
どるあがどるあが

機械的にイベントハンドラーの型定義をする

以下のようなハンドラの引数eventの型を明示したいとき

  const clickHandler = (event: any) => console.log("MouseEvent", event);

まずは使用するところに全部書く

  <button
      onClick={(event) => console.log("MouseEvent", event)}
  >

そしてeventの上でホバーする

すると型定義がわかるので、コピーして貼り付け

  const clickHandler = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => console.log("MouseEvent", event);

これで型定義が明示できた

  <button onClick={clickHandler}>
    ボタン
  </button>