React×TypeScriptのonChangeのprops渡しで諦めない

型が(event: React.ChangeEvent<HTMLInputElement>) => voidのComponentのpropsにReact.useStateのReact.SetStateActionを渡して怒られたので,解決しました！

親Component

const ParentComp = () => {
  const [inputValue, setInputValue] = React.useState('')
  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setInputValue(e.target.value)
  }
  return <ChildComp value={inputValue} onChange={(e) => handleChange(e)} />
}

子Component

type ChildCompProps = {
  value: string
  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void
}
const ChildComp = (props: ChildCompProps) => <input value={props.value} onChange={e => props.onChange(e)} />

eventの型をstringで使うようにするhandleChangeを挟むことで,怒られなくする.

意外と短く済むのです.