reactjs - How to define the type of the Input component ref after the React.forwardRef forwards the ref?

Question

Code

import React, { forwardRef, useRef } from "react";

import { Input } from "antd";

const Child = forwardRef<HTMLInputElement, any>((props, ref) => {
  // typescript error
  return <Input ref={ref} />;
});

const Parents = () => {
  const inputRef = useRef<HTMLInputElement>(null);
  return <Child ref={inputRef} />;
};

export default Parents

Error message

TS2322: Type '((instance: HTMLInputElement) => void) | MutableRefObject<HTMLInputElement>' is not assignable to type 'LegacyRef<Input>'. ??Type '(instance: HTMLInputElement) => void' is not assignable to type 'LegacyRef<Input>'. ????Type '(instance: HTMLInputElement) => void' is not assignable to type '(instance: Input) => void'. ??????Types of parameters 'instance' and 'instance' are incompatible. ????????Type 'Input' is missing the following properties from type 'HTMLInputElement': accept, align, alt, autocomplete, and 284 more.

How do I define the type of the Input component ref?

question from:https://stackoverflow.com/questions/65948412/how-to-define-the-type-of-the-input-component-ref-after-the-react-forwardref-for

Answer 1

You don't need to add a generic parameter any for props if you are not using it in the function definition/component.

const Child = forwardRef<HTMLInputElement>((props, ref) => {
  return <Input ref={ref} />;
});

A short note on forwardRef. It is a generic function that has type parameters of ref and props types.

const comp = React.forwardRef<RefType, PropsType>((props, ref) => {
  return someComp;
});

You will be confused about the ordering of the generic parameter (ref and then props) which is the opposite of the ordering of the function parameters (props and then ref).