Extend Window type with Typescript

During typescript app development, sometime you 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, you need to extend the Window type with the properties or functions you 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 you 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, you 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.

For example, in a NextJS project, you can add the snippet in the globals.d.ts file like this:

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

Hope this article helps you to avoid this Typescript error.