イベントハンドラの共通化

[MaximizedOwl]

what

増えてしまった handleClickHoge() 等を関数を共通化して内部で分岐させる。

why

1. コードの見通し改善

参考になりそうな資料

1. https://qiita.com/Takepepe/items/f1ba99a7ca7e66290f24

[MaximizedOwl]

遭遇したエラーなど

どこから来たイベントかを判別するためにidから判別しようとしたが、e.target.idが使えない。

エラー文

プロパティ 'id' は型 'EventTarget' に存在しません。

コード

  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
    if (e.target.id === 'header-menu') {
      
    }
  };

解決策

e.target.id => e.currentTarget.id.

  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
    if (e.currentTarget.id === 'header-menu') {

    }
  };

参考資料

1. 【TypeScript】event.target と event.currentTargetの違いについて

[MaximizedOwl]

イベントハンドラを共通化する際、元のイベントハンドラで非同期処理を行っている場合の共通化手法

解決策

共通化するイベントハンドラを非同期処理可能なように記述する(個別にasyncを書かない)

コード

async function handleClick(event) {
  // 共通の処理をここに記述する

  // event.currentTarget.idに応じた処理
  if (event.currentTarget.id === "element1") {
    await asyncFunction1();
  } else if (event.currentTarget.id === "element2") {
    await asyncFunction2();
  } else {
    await asyncFunction3();
  }

  // その他の共通処理をここに記述する
}

参考文献

1. ChatGPT

[MaximizedOwl]

関数を共通化する際、戻り値と引数が違う関数同士を共通化したい

手法検討

大きく分けて2つの方法がある。

1. オーバーロードを使う。
2. ジェネリクスを使う。

違い

• ユニオン型: 戻り値の型を変えないときに使う
• 関数のオーバーロード: 引数の型によって戻り値の型を変える必要があり、かつ引数にどんな型が入ってくるか明らかであるとき
• ジェネリクス: 引数にどんな型が入ってくるか明らかでないとき、もしくは引数の型と戻り値の型が直接結びついているとき

結論と所感

ジェネリクスを利用しようと思う。
どの関数を使っているかがわかりやすいし、コードの見通しが(個人的には)良くなる。
ただし戻り値と引数のテストは難しくなりそう…。

参考資料

1. https://dev.to/pffigueiredo/the-typescript-functions-mental-model-1301
2. https://www.youtube.com/watch?v=sswUBXaoXSI

[MaximizedOwl]

下記に関しては共通化しようと思ったメソッドはライブラリがイベントハンドラっぽく定義しておりそれを崩したくなかったので共通化は中止した。
#5 (comment)