フォームとイベント

パフォーマンスが問題にならない場合（通常はそうではありません！）、インラインハンドラーを使用するのが最も簡単です。それは型の推論とコンテキスト型付けを使用するだけでよいからです。

const el = (
  <button
    onClick={(event) => {
      /* event will be correctly typed automatically! */
    }}
  />
);

しかし、イベントハンドラーを個別に定義する必要がある場合は、IDEツールが非常に役立ちます。@type定義には豊富な型情報が付属しているためです。探しているものを入力すれば、通常はオートコンプリートが役立ちます。フォームイベントのonChangeの例を次に示します。

type State = {
  text: string;
};
class App extends React.Component<Props, State> {
  state = {
    text: "",
  };

  // typing on RIGHT hand side of =
  onChange = (e: React.FormEvent<HTMLInputElement>): void => {
    this.setState({ text: e.currentTarget.value });
  };
  render() {
    return (
      <div>
        <input type="text" value={this.state.text} onChange={this.onChange} />
      </div>
    );
  }
}

TypeScript Playground で表示

引数と戻り値を React.FormEvent<> と void で型付けする代わりに、イベントハンドラー自体に型を適用することもできます（@TomasHubelbauer 氏の貢献）。

  // typing on LEFT hand side of =
  onChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
    this.setState({text: e.currentTarget.value})
  }

同じことを行う2つの方法があるのはなぜですか？

最初の方法は、推論されたメソッドシグネチャ(e: React.FormEvent<HTMLInputElement>): voidを使用し、2番目の方法は、@types/reactによって提供されるデリゲートの型を強制します。したがって、React.ChangeEventHandler<>は、@types/reactによる単なる「祝福された」型付けであり、推論されたメソッドはより...職人技の手作りのように考えることができます。どちらにしても、知っておくと良いパターンです。詳細については、Github PRを参照してください。

フォーム内の非制御コンポーネントを使用したonSubmitの型付け

イベントの型をあまり気にしない場合は、React.SyntheticEventを使用するだけで済みます。ターゲットフォームにアクセスしたいカスタムの名前付き入力がある場合は、型アサーションを使用できます。

<form
  ref={formRef}
  onSubmit={(e: React.SyntheticEvent) => {
    e.preventDefault();
    const target = e.target as typeof e.target & {
      email: { value: string };
      password: { value: string };
    };
    const email = target.email.value; // typechecks!
    const password = target.password.value; // typechecks!
    // etc...
  }}
>
  <div>
    <label>
      Email:
      <input type="email" name="email" />
    </label>
  </div>
  <div>
    <label>
      Password:
      <input type="password" name="password" />
    </label>
  </div>
  <div>
    <input type="submit" value="Log in" />
  </div>
</form>

TypeScript Playground で表示

もちろん、何らかの重要なフォームを作成する場合は、TypeScriptで記述されたFormikまたはReact Hook Formを使用する必要があります。

イベント型のリスト

イベント型	説明
AnimationEvent	CSSアニメーション。
ChangeEvent	`<input>`、`<select>`、および`<textarea>`要素の値の変更。
ClipboardEvent	コピー、ペースト、カットイベントの使用。
CompositionEvent	ユーザーが間接的にテキストを入力することによって発生するイベント（例：ブラウザとPCの設定によっては、たとえばUSキーボードで日本語を入力したい場合、追加の文字がポップアップウィンドウに表示される場合があります）。
DragEvent	ポインティングデバイス（例：マウス）を使用したドラッグアンドドロップ操作。
FocusEvent	要素がフォーカスを取得または失ったときに発生するイベント。
FormEvent	フォームまたはフォーム要素がフォーカスを取得/失ったとき、フォーム要素の値が変更されたとき、またはフォームが送信されたときに発生するイベント。
InvalidEvent	入力の有効性制約が失敗した場合に発生します（例：`<input type="number" max="10">`で誰かが20という数字を挿入した場合）。
KeyboardEvent	キーボードとのユーザーインタラクション。各イベントは、単一のキー操作を記述します。
MouseEvent	ユーザーがポインティングデバイス（例：マウス）を操作することによって発生するイベント。
PointerEvent	マウス、ペン/スタイラス、タッチスクリーンなど、さまざまなポインティングデバイスとのユーザーインタラクションによって発生するイベント。マルチタッチもサポートします。古いブラウザ（IE10またはSafari 12）向けに開発していない限り、ポインターイベントが推奨されます。UIEventを拡張します。
TouchEvent	ユーザーがタッチデバイスを操作することによって発生するイベント。UIEventを拡張します。
TransitionEvent	CSSトランジション。完全にブラウザでサポートされていません。UIEventを拡張します。
UIEvent	マウス、タッチ、ポインターイベントの基本イベント。
WheelEvent	マウスホイールまたは同様の入力デバイスでのスクロール。（注：`wheel`イベントは`scroll`イベントと混同しないでください。）
SyntheticEvent	上記のすべてのイベントの基本イベント。イベントタイプが不明な場合に使用する必要があります。

InputEventについてはどうですか？

InputEventがないことに気づいたでしょう。これは、イベント自体にブラウザの完全なサポートがなく、ブラウザによって動作が異なる可能性があるため、Typescriptではサポートされていないためです。代わりにKeyboardEventを使用できます。

出典

イベント型のリスト​

イベント型のリスト