reactjs - typescript 中这个复杂的 'is not assignable to type' 错误的解释

Question

我正在尝试将我的 React 项目移至 Typescript，但没有 Typescript 经验。我有一个定义如下的组件(精简):

interface InputProps {
  handleKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
  placeholder: string;
  style?: React.CSSProperties;
}
const Input: React.ForwardRefRenderFunction<HTMLInputElement, InputProps> = (
      ^^^^^
  { handleKeyDown, placeholder, style }: InputProps,
  ref: React.MutableRefObject<HTMLInputElement | null>
): JSX.Element => {
  return (
    <input
      ref={ref}
      onKeyDown={handleKeyDown}
      type="text"
      placeholder={placeholder}
      style={style}
    />
  );
};
export const ForwardedInput = React.forwardRef(Input);

现在我在 const Input 上收到以下 TypeScript 错误，这对我来说有点太复杂了:

TS2322: Type '({ handleKeyDown, placeholder, style }: InputProps, ref: React.MutableRefObject<HTMLInputElement | null>) => JSX.Element' 
is not assignable to type 'ForwardRefRenderFunction<HTMLInputElement, InputProps>'.
  Types of parameters 'ref' and 'ref' are incompatible.
    Type 'MutableRefObject<HTMLInputElement | null> | ((instance: HTMLInputElement | null) => void) | null' is not assignable to type 'MutableRefObject<HTMLInputElement | null>'.
      Type 'null' is not assignable to type 'MutableRefObject<HTMLInputElement | null>'.

我猜我需要通过将 ref: React.MutableRefObject<HTMLInputElement | null> 更改为其他内容来解决此问题，但我不知道如何解决，因为我不知道错误的具体含义。

编辑:第一个答案建议使用泛型参数，所以我对函数进行了如下调整:

const Input = ({ handleKeyDown, placeholder, style }: InputProps, ref: any) => {

我必须输入 props 和 ref 以防止 typescript 警告(我使用 strict: "true" )，实际上这消除了上述代码示例中的警告。

但是...使用 any 导致:

ESLint: Unexpected any. Specify a different type.(@typescript-eslint/no-explicit-any)

根据 this，应该避免使用 any，应该使用 unknown，但是虽然这消除了函数头中的警告，但它在输入组件上的 ref={ref}中导致了一个大错误，说明与我的第一个错误相同的与ref不兼容. TypeScript 比我想象的要难。

Answer 1

您可以在 React.forwardRef 上使用通用参数

export const ForwardedInput = React.forwardRef<HTMLInputElement, InputProps>(
  (props, ref) => {
    const { handleKeyDown, placeholder, style } = props;
    return (
      <input
        ref={ref}
        onKeyDown={handleKeyDown}
        type="text"
        placeholder={placeholder}
        style={style}
      />
    );
  }
);

Playground link

如果您需要将 React.forwardRef 调用及其功能分开，您可以使用 React.ForwardRefRenderFunction 泛型类型。

const ForwardInputRefFunction: React.ForwardRefRenderFunction<HTMLInputElement, InputProps> = (
  props,
  ref
) => {
  const { handleKeyDown, placeholder, style } = props;

  return (
    <input
      ref={ref}
      onKeyDown={handleKeyDown}
      type="text"
      placeholder={placeholder}
      style={style}
    />
  );
};

const ForwardedInput = React.forwardRef(ForwardInputRefFunction);

Playground link

您可以通过阅读 node_modules 中的定义文件来探索新类型。要在代码沙箱中执行此操作，请使用 Cmd + Left-click 热键。