【TypeScript】EventCallbackの型ってどうするのか

TypeScriptを導入して、select要素のonChangeにどういう型を定義するべきかわからなかったので調査した

Takepepeさんのこちらの記事が参考になった qiita.com

型推論により、こう定義するのがよいみたいだが

type Props = {
  onClick: (event: React.MouseEvent<HTMLInputElement>) => void
  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void
  onKeypress: (event: React.KeyboardEvent<HTMLInputElement>) => void
  onBlur: (event: React.FocusEvent<HTMLInputElement>) => void
  onFocus: (event: React.FocusEvent<HTMLInputElement>) => void
  onSubmit: (event: React.FormEvent<HTMLFormElement>) => void
  onClickDiv: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void
}

onChangeなのでこれかと思ったら型マッチしていないというエラーが発生した

onChange: (event: React.ChangeEvent<HTMLInputElement>) => void

上の記事にもあるように Generics に指定している型は厳密な要素の型にしないといけない

そのため Select要素に対しては以下にするのが正解だった

onChange: (event: React.ChangeEvent<HTMSelectElement>) => void