reactjs - React forwardRef con TypeScript

He enviado ref usando React forwardRef, a continuación está mi código:

interface PropsDummy {}

const ProfileMenu = forwardRef<HTMLInputElement, PropsDummy>((props, ref) => {
  console.log(ref.current);
}

¿pero por qué esto está causando un error en TypeScript?

Property 'current' does not exist on type '((instance: HTMLInputElement | null) => void) | MutableRefObject<HTMLInputElement | null>'

pero si uso aliasing ese objeto actual funciona excelente sin error de TypeScript

interface PropsDummy {}

const ProfileMenu = forwardRef<HTMLInputElement, PropsDummy>((props, ref) => {
  const myRef = ref as React.RefObject<HTMLInputElement>;
  console.log(myRef.current);
}

¿Cómo obtener el objeto actual sin error de TypeScript?

gracias

Respuesta #1

La razón por la que no funciona es porque el tipo para ForwardedRef está definido como:

type ForwardedRef<T> = ((instance: T | null) => void) | MutableRefObject<T | null> | null;

O en este caso particular:

((instance: HTMLInputElement | null) => void) | MutableRefObject<HTMLInputElement | null>

Intentar simplemente acceder a .current, sin hacer algún tipo de verificación de tipo, no funcionará porque, como puedes ver, el ref podría ser una función y las funciones no tienen dicha propiedad (current).

Funcionó cuando convertiste el objeto al tipo que esperabas, pero ten en cuenta que los refs pueden ser una función o un objeto (¡o nulos!), por lo que deberías verificar esto antes de intentar acceder a la propiedad current.

Esto debería funcionar:

const ProfileMenu = forwardRef<HTMLInputElement, PropsDummy>((props, forwardedRef) => {
  if (forwardedRef != null && typeof forwardedRef !== 'function') {
    console.log(forwardedRef.current);
  }
  
  return (
    <div className="App" ref={forwardedRef}>
      <h1>Hello there</h1>
    </div>
  );
});