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を使わなくてもちゃんと型情報を保ったまま使える。細かいことだけどスッキリしたので書いた。
雑談
大きな買い物をしました。