Question

我有一个自定义TextField组件（以下是简化版本），它接受下面列出的“ onChange”道具

type TextFieldCallback = ({ value, name }: { value: string, name: string }) => any;

interface TextFieldProps {
  onChange: TextFieldCallback;
  placeholder?: string;
  disabled?: boolean;
}

const TextField = (props: TextFieldProps, ref: React.RefObject<HTMLInputElement>) => {
  const {
    onChange,
    placeholder,
    disabled
  } = props;

// more code
return (
  <div>
    <input type='text' placeholder={placeholder} onChange={onChange}/>
  </div>
);

export default TextField;

当我使用此组件时，打字稿没有问题，无法推断传入的onChange函数的类型。

<TextField
  onChange=(({ value }) => setSearchTerm(value)
  placeholder='enter text'
/>

这很好用，onChange函数被接受为匹配类型TextFieldCallback，并且TextField的类型符合预期。

但是，当我将其包装在forwardRef中以便可以传递引用时，我失去了TextField上的类型安全性

const TextField = forwardRef((props: TextFieldProps, ref: React.RefObject<HTMLInputElement>) => {
// ... code
});

现在我在使用

的位置出现错误

<TextField
  onChange=(({ value }) => setSearchTerm(value) // value implicitly has any type // error
  placeholder={0} // this should error because it's not a string, but I've lost all typesafety 
/>

我想知道是否有人知道使这些类型正常工作的正确方法，我曾尝试使用泛型类型，将文本字段的类型设置为TextFieldProps，并且对此一无所知。我希望我只是缺少一些明显的东西，但是我们中的一些人可以尝试各种选择。

如何将打字稿类型传递到包装在forwardRef中的React组件中

0 个答案: