Home How do I tell typescript once and for all that ResizeObserver is not always present on window?

Questions

How do I tell typescript once and for all that ResizeObserver is not always present on window?

February 23, 2023

I am using ResizeObserver with feature detection like this:

if ("ResizeObserver" in window) {
    // Use ResizeObserver
} else {
    window.addEventListener("resize", doFallBack(), {passive: true});
}

This gives a typescript error "TS2339: Property ‘removeEventListener’ does not exist on type ‘never’".

I can solve this on a case by case basis, either with a ts-ignore comment or with window as Partial<Window>. However, I am wondering if I can tell typescript once and for all that ResizeObserver is not always present, since it isn’t supported by older Safari versions.

>Solution :

You can augment the Window interface and say that ResizeObserver should be optional:

interface Window {
    ResizeObserver?: ResizeObserver;
}

if ("ResizeObserver" in window) {
    // Use ResizeObserver
} else {
    window.addEventListener("resize", doFallBack(), {passive: true});
}

Playground