はじめに

型って難しい・・・。

本論

画面上にボタンを表示し、クリックするとコンソールにvalueの値（test）を表示するだけのコードです。
VS codeで書きます。
（VS codeで型推論を利用するため。）

App.tsx

function App() {

  const checkEventType = (e) => {
    console.log(e.target.value);
  }

  return (
    <div className="App">
      <button type="button" value="test" onClick={checkEventType}>Click me</button>
    </div>
  );
}

この状態でボタンをクリックすると、下記エラーが発生します。

Parameter 'e' implicitly has an 'any' type.
     5 | function App() {
     6 |
  >  7 |   const checkEventType = (e) => {
       |                           ^
     8 |     console.log(e.target.value);
     9 |   }
    10 |

イベント（e）に型が指定されていないことが原因です。
明示的にany型を設定すると、問題なく動くようになります。

App.tsx

function App() {

  const checkEventType = (e:any) => {
    console.log(e.target.value);
  }

  return (
    <div className="App">
      <button type="button" value="test" onClick={checkEventType}>Click me</button>
    </div>
  );
}

ただし、イベントにもEvent型というものが存在します。
コードを書き換えます。

App.tsx

function App() {

  const checkEventType = (e) => {
    console.log(e.target.value);
  }

  return (
    <div className="App">
      {/* 一旦関数を外します。 */}
      <button type="button" value="test" onClick={(event) => { }}>Click me</button>
    </div>
  );
}

eventにマウスオーバーすると、下記の通り型が推測されます。

これをイベントの型に指定します。

App.tsx

function App() {

  const checkEventType = (e:React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
    console.log(e.target.value);
  }

  return (
    <div className="App">
      {/* 再度関数を指定します。 */}
      <button type="button" value="test" onClick={checkEventType}>Click me</button>
    </div>
  );
}

この状態で再びボタンをクリックすると、今度は下記エラーが発生します。

TS2339: Property 'value' does not exist on type 'EventTarget'.
    2 |
    3 |   const checkEventType = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
  > 4 |     console.log(e.target.value);
      |                          ^^^^^
    5 |   }
    6 |
    7 |   return (

これはEventTarget型にvalueプロパティがないことが原因なので、型アサーションで対応します。

App.tsx

function App() {

  const checkEventType = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
    // 型アサーションでHTMLButtonElementに変換
    console.log((e.target as HTMLButtonElement).value);
  }

  return (
    <div className="App">
      <button type="button" value="test" onClick={checkEventType}>Click me</button>
    </div>
  );
}

この状態でボタンをクリックすると、問題なく動作します。

参考

【TypeScript】Reactでのイベントに設定する型の理解が少しだけ深まる

EventTarget

Property 'value' does not exist on type 'EventTarget' in TS