Errors using useRef with Typescript

Question

I am trying to use useRef as shown below with typescript strict set to On, but I keep getting 'Object is possibly 'undefined'.

  const inputRef = React.useRef();
  const updateSelectionStart = () =>
    setSelectionStart(inputRef.current.selectionStart);

I also tried with this:

const inputRef = useRef<HTMLInputElement>(null);
and
const inputRef = useRef<HTMLInputElement | null>(null);

And nothing.

Any suggestions about how to do it without typescript errors?

I know, I just cannot find a way to make it work. A null check won't work in this case either. — Rafael Moreno Del Pino, Mar 30 '20 at 22:27

score 0 · Answer 1 · answered Mar 30 '20 at 22:27

0

Try using typescript optional chaining feature as below:

const inputRef = React.useRef();
  const updateSelectionStart = () =>
    setSelectionStart(inputRef.current?.selectionStart);

answered Mar 30 '20 at 22:27

Ali Torki

I also tried that but then I get: Property 'selectionStart' does not exist on type 'never'. – Rafael Moreno Del Pino Mar 30 '20 at 22:31
Take a look at this answer, https://stackoverflow.com/a/40017467/5456476 – Ali Torki Mar 30 '20 at 22:35

score 0 · Accepted Answer · answered Mar 31 '20 at 14:34

0

I fixed it by doing this:

const updateSelectionStart = () => {
    setCursorPosition(inputRef.current!.selectionStart || 0);
};

answered Mar 31 '20 at 14:34

2 Answers2