TypeScriptでReactのフォーム部品のイベントハンドラーを使う

うまいタイトルがつけられなかった。

class TodoForm extends React.Component<PropTypes, StateTypes> {
  constructor(props: PropTypes) {
    super(props);
    ...
  }

  public render() {
    return (
      <label>
        What to do next?
        <input
          type='text'
          value={this.state.input}
          onChange={this.onChangeHandler}
          onKeyDown={this.onKeyDownHandler}
        />
      </label>
    );
  }

  private onChangeHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
    ...
  }

  private onKeyDownHandler = (event: React.KeyboardEvent) => {
    const ENTER_KEY_CODE = 13;
    if (event.keyCode === ENTER_KEY_CODE && this.state.input !== '') {
      ...
    }
  };
}

onChangeやonKeyDownのハンドラの第一引数にはイベントが入るが、その型に何を指定すればいいのかがずっとわからなくて、anyを使ったりいろいろしてたが、正解を見つけた。

Reactの中に、React.xxxxEventという名前のinterfaceがあるので、それを指定する。onChangeであれば、↑の例にもあるようにChangeEventを指定し、ジェネリクスで対象のタグを指定する。

これで、無理やりなキャストやanyを使わなくてもちゃんと型情報を保ったまま使える。細かいことだけどスッキリしたので書いた。

雑談

大きな買い物をしました。