Extend Window type with Typescript

During typescript app development, we may need to access properties or functions of the Window object. Some of these properties or functions are not available in the window object defined by the browser. Those may be defined by Third-party libraries you can add to your pages like Google Tag Manager for example. Because of this, we need to extend the Window type with the properties or functions we need to access.

TypeScript Window type

The Window type is defined in the lib.dom typescript module. You can find the definition of the Window type at the following TSDoc.

When can we have new properties not defined by your code in the Window object? An example is when you want to add Google Tag Manager or Google Analytics to your page. Those scripts are not loaded by your code directly but you may communicate with them through some window object properties. For Google Tag Manager, the datalayer property is added and some of the functions are also added.

In this case, you will have the following error:

Property does not exist on type 'window & typeof globalthis'

Extend Window type with the missing properties

In order to extend the Window type, we need to add the missing properties or functions.

The following code snippet will extend the Window type with the missing properties or functions.

declare global {
  interface Window {
    gtag: (...args: any[]) => void;
    dataLayer: Record<string, any>;
  }
}

Do not forget to add the file containing this snippet to the list of project files for the Typescript compilation. In a NextJS project, you can add the snippet in the globals.d.ts file.

Hope this article helps you to avoid Typescript errors.