用于 Grommet 的 RangeInput 组件的 onChange 事件的正确类型定义是什么？

Question

我收到格索onChangeRangeInput组件的打字稿错误。

<RangeInput
onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
setAge(event.target.value)
}
/>

错误：

Type '(event: React.ChangeEvent<HTMLInputElement>) => void' is not assignable to type '((event: ChangeEvent<Element>) => void) & ((event: ChangeEvent<HTMLInputElement>) => void)'.
Type '(event: React.ChangeEvent<HTMLInputElement>) => void' is not assignable to type '(event: ChangeEvent<Element>) => void'.
Types of parameters 'event' and 'event' are incompatible.
Type 'ChangeEvent<Element>' is not assignable to type 'ChangeEvent<HTMLInputElement>'.
Type 'Element' is missing the following properties from type 'HTMLInputElement': accept, align, alt, autocomplete, and 159 more.ts(2322)
index.d.ts(8, 3): The expected type comes from property 'onChange' which is declared here on type 'IntrinsicAttributes & RangeInputProps & ClassAttributes<HTMLInputElement> & InputHTMLAttributes<HTMLInputElement> & { ...; }'

用于onChange 的正确类型是什么？React.ChangeEvent？

Answer 1

这是由grommet的类型引起的，请参阅 https://github.com/grommet/grommet/blob/2a38c185e1/src/js/components/RangeInput/index.d.ts#L8。

onChange的类型省略了泛型参数T，这意味着onChange的类型是(event: React.ChangeEvent<Element>) => void。

解决此问题的一种简单方法是在项目中使用as：

<RangeInput
onChange={(event: React.ChangeEvent) =>
setAge((event.target as HTMLInputElement).value)
}
/>

更好的方法是为grommet创建一个 pr 来解决此问题，只需要删除onChange声明的行。