使用as扩展组件时，样式化组件将覆盖props类型

Question

我有一个Input基本组件，然后我想创建一个扩展它的Textarea。

type InputProps {
name: string;
}
const Input = styled.input.attrs((props) => ({name: props.name, id: props.name})<InputProps>``;
const Textarea = styled(Input).attrs({as: "textarea"})``;

现在，当我想将Textarea与onChange处理程序一起使用时，我会遇到类型冲突：

const onChange = (e: ChangeEvent<HTMLTextareaElement>) => {};
<Textara name="text" onChange={onChange} />

产品：

Error: Type '(e: ChangeEvent<HTMLTextAreaElement>) => void' is not assignable to type ChangeEventHandler<HTMLInputElement>'.

我该如何解决这个问题？我目前正在使用一个变量来在相同的组件之间共享我的CSS，但这更多的是一种变通方法。

Answer 1

方法01:直接在Textarea上应用as，以便在编译时对的类型进行更精确的猜测

const Textarea = styled(Input)``;
// still the input is input element so the guessing of the type will include HTMLInputElement
const onChange = (e: ChangeEvent<HTMLInputElement> & React.ChangeEvent<HTMLTextAreaElement>) => {}
<Textarea as="textarea" name="text" onChange={onChange} />

方法02:使用HTMLElement覆盖所有html元素，并在onChange中强制类型转换

const Textarea = styled(Input).attrs({as: "textarea"})``;
const onChange = (e: ChangeEvent<HTMLElement>) => {
const { value } = e.target as HTMLTextAreaElement
console.log(value)
};
<Textarea name="text" onChange={onChange} />