TypeScriptでreact-bootstrapのForm.ControlのonChangeイベントの型を付ける

Form.ControlのonChangeイベントだけじゃないかも。

React-bootstrap + TypeScriptにおいて、下記のようにForm.ControlのイベントハンドラhandleChangeの型をどうつければ良いのか分からなかった。

<Form.Control type="text" onChange={handleChange} />

vscodeで型推論されるのは((event: React.ChangeEvent<FormControlElement>) => void)という型のようだが、その型を書いてもFormControlElementというメンバはreact-bootstrapには無いというエラーになる。

ググったら出てきた。

@types/react-bootstrap form event typings are unusable · Issue #16208 · DefinitelyTyped/DefinitelyTyped · GitHub

結局、(e: React.ChangeEvent<typeof FormControl & HTMLInputElement>) => voidという型をhandleChangeにつけたらうまくいった。理由はよくわかっていない。