Extend Window type with Typescript
Emmanuel Gautier / November 27, 2021
2 min read
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.
Related Posts
How to use Chakra UI Button and Link components with NextJS Link
There is some glue to add to make Chakra UI and NextJS work together. The Chakra UI components do not generate the "a" tag by default for a link. Let's see how to use the Chakra button to generate links between pages.
How to use Chakra UI Button and Link components with NextJS Link
There is some glue to add to make Chakra UI and NextJS work together. The Chakra UI components do not generate the "a" tag by default for a link. Let's see how to use the Chakra button to generate links between pages.
How to use Chakra UI Button and Link components with NextJS Link
There is some glue to add to make Chakra UI and NextJS work together. The Chakra UI components do not generate the "a" tag by default for a link. Let's see how to use the Chakra button to generate links between pages.
Featured Posts
How to deal with Docker Hub rate limit on AWS
Since 2020, DockerHub has been limited to only 200 container image pull requests per six hours. This article will help you to deal with this limitation on AWS.
How to enable Python type checking in VSCode
Python now has support for type hints. In this article, we will see how to enable better IntelliSense and type checking analysis in VSCode.
How to manage Internationalization with NextJS SSG
Staticaly generating a website with the NextJS framework in different languages is not so obvious.