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

When you declare const overlayEl = useRef(null);Makes the type it comes out as is null because that's the best possible inference it can offer with that much information, give typescript more information and it will work as intended.

Try....

 const overlayEl = useRef<HTMLDivElement>(null);

Alternatively some syntax sugar for if you don't care for when its undefined is to do something like this.

const overlayEl = useRef(document.createElement("div"))

using the above syntax all common DOM methods just return defaults such as "0" i.e overlayEl.offsetWidth, getBoundingClientRect etc.

Usage:

if(overlayEl.current) {    // will be type HTMLDivElement NOT HTMLDivElement | null    const whattype = overlayEl.current; }

The way this works is typescripts static analysis is smart enough to figure out that if check "guards" against null, and therefore it will remove that as a possible type from the union of null | HTMLDivElement within those brackets.

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.

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.