typescript - Question about React typescript useRef

Question

The goal is to make a reusable hook that effects on DOM.

Example Code:

import { useEffect, useRef } from 'react';

function useFocus() {
  const domRef = useRef<HTMLElement | null>(null);

  useEffect(() => {
    domRef.current?.focus()
  }, []);

  return {
    domRef
  };
}

const App = () => {
  const { domRef } = useFocus();

  return (
    <div>
      <input type='text' ref={domRef} />
    </div>
  );
};

export default App;

Error occur:

TypeScript error in /Users/yoki/Code/Demos/use-ref-demo/src/App.tsx(20,26):
Type 'MutableRefObject<HTMLElement | null>' is not assignable to type 'LegacyRef<HTMLInputElement> | undefined'.
  Type 'MutableRefObject<HTMLElement | null>' is not assignable to type 'RefObject<HTMLInputElement>'.
    Types of property 'current' are incompatible.
      Type 'HTMLElement | null' is not assignable to type 'HTMLInputElement | null'.
        Type 'HTMLElement' is missing the following properties from type 'HTMLInputElement': accept, align, alt, autocomplete, and 49 more.  TS2322

    18 |   return (
    19 |     <div>
  > 20 |       <input type='text' ref={domRef} />
       |                          ^
    21 |     </div>
    22 |   );
    23 | };

Question: How can I give the correct type for useRef<...>() ?

The right thinking is to give the type that any type which exntends from HTMLElememnt, instead of any or assertion, please help.

The dom is not limited to input, it can be div or input or span etc, so HTMLInputElement type is not good for this case.

Isn't it an object type?

wahwahwah
– wahwahwah

2021-03-22 05:32:13 +00:00
Commented Mar 22, 2021 at 5:32 — wahwahwah
– wahwahwah, Commented Mar 22, 2021 at 5:32

Denis Malykhin · Accepted Answer · 2021-03-22 05:02:22Z

0

Take a closer look at the error message: Type 'HTMLElement | null' is not assignable to type 'HTMLInputElement | null'.. The correct type, according to the message is HTMLInputElement | null. Also, it make sense to change useFocus a bit:

useEffect(() => {
    domRef.current?.focus()
  }, [domRef]);

answered Mar 22, 2021 at 5:02

Denis Malykhin

3471 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Yokiijay Over a year ago

Thank you, but we aren't supposed to know the type of dom, it could be any dom.

Shubhaw Kumar Over a year ago

In that case, put React.useRef<any>(null)

Yokiijay Over a year ago

I also required not to use any : ( Because any can solve anything or nothing

Denis Malykhin Over a year ago

oh, I see, another option is to use union - '|' and define the type like 'HTMLInputElement | HTMLElement | null'

Yokiijay Over a year ago

@DenisMalykhin Still, we don't specify the dom type, it could be HTMLInputElement or HTMLDivElement or HTMLSVGElement ....

|

Collectives™ on Stack Overflow

typescript - Question about React typescript useRef

Example Code:

Error occur:

Question: How can I give the correct type for useRef<...>() ?

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Example Code:

Error occur:

Question: How can I give the correct type for useRef<...>() ?

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related