Typescript, how to pass "Object is possibly null" error?

Question

I've got the "Object is possibly null" error many times and usually I use a safety "if statement" in case it returns null.

I've got the following function:

const ModalOverlay = (props: any[]) => {
  const overlayEl = useRef(null);
    useEffect(() => {
    overlayEl.current.focus();
    });
    return <div {...props} ref={overlayEl} />;
  }

But overlayEl.current gets the error "Object is not defined". So I've tried:

if (!overlayEl) {
    return null
  } else {
    useEffect(() => {
    overlayEl.current.focus();
    });
    return <div {...props} ref={overlayEl} />;
  }

Which didn't work. I've tried also:

overlay && overlayEl.current.focus();

Any hints would be highly appreciated! Thanks

Answer 1

const overlayEl = useRef() as MutableRefObject<HTMLDivElement>;

It will cast overlayEl to an initiated MutableRefObject that is the returning value of useRef:

function useRef<T = undefined>(): MutableRefObject<T | undefined>;

Yet in this case, the compiler will always think that overlayEl has a value.

Answer 2

Add a type to the ref as mentioned by @Shanon Jackson:

const linkRef = useRef<HTMLLinkElement>(null);

And then, make sure you check for null value before using current:

if (linkRef.current !== null) {
  linkRef.current.focus();
}

This will satisfy Typescript. Whereas either by itself wouldn't.

Using any or casting in order to "trick" the compiler defeats the purpose of using Typescript, don't do that.

Answer 3

I think this is more succinct than the other answers here:

const ModalOverlay = (props: any[]) => {
  const overlayEl = useRef<HTMLDivElement>(null);
  useEffect(() => {
    overlayEl.current!.focus();
  });
  return <div {...props} ref={overlayEl} />;
}

You specify the type of the reference, and you state you know it's not null.

Answer 4

If you want to "pass/skip" then this will do it const overlayEl: any = useRef(null);

Answer 5

You can also use optional chaining which is introduced in ES2020 instead of "if" statement for cleaner code

const myRef = useRef<HTMLLinkElement>(null);

myRef.current?.focus();

You can check its browser support at caniuse.

Answer 6

If you really know that in executing time you dont have a error here then just put :

 (overlayEl as any).current 

If not, better use:

    if (typeof overlayEl !== 'undefined' &&
      typeof overlayEl.current !== 'undefined' &&
      overlayEl.current === null) {          
      return;
    }

    // Or

    try {
      // you code here ...
      // This is fine way to check by order -> parent.parent.FinalInstance
      // Also try & catch will handle all bad situation about current error
      overlay &&  overlayEl.current && overlayEl.current.focus();

    } catch(e){
       console.log("Real null >> ", e);     
    }

  // Suggest if i am wrong in syntax somewhere ,this is fast answer ;)

Answer 7

Sometimes we useRef not only to hold an element but a value like data. somehow when I check if(something.current) return something.current not working even if i add && something.current!=null so i found that:

something.current! which says to typescript i know there is a value and bypass this issue.

Answer 8

if you want to give no chance to typescript use this :

const iframe = useRef<HTMLIFrameElement | null>(null);

     if (
   typeof iframe !== "undefined" &&
   typeof iframe.current !== "undefined" &&
   iframe.current !== null
 ) {
   iframe?.current?.contentWindow='';
   );
 }

Answer 9

Depends on what you prefer but a nice syntax and structure might be to create an interface:

interface divEL {
  current: HTMLDivElement | null;
}

This will keep your declaration clear and short and you can reuse the divEl interface for similar useRef hooks.

const overlayEl: divEL = useRef(null);

Then add focus() like this:

overlayEl.current!.focus();