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.
Subscribe to the newsletter
Get emails from me about web development and a lot of topics related to tech.
Related Posts
Convert a JavaScript object to queryparams string
This post describes two very simple ways to convert a JavaScript object to a querystring both in a browser environment or server environment.
ESLint Global Variables
When we use some global variables defined elsewhere, eslint throws an error saying the variable is not defined. Here is how to configure eslint to ignore those.
ESLint Global Variables
When we use some global variables defined elsewhere, eslint throws an error saying the variable is not defined. Here is how to configure eslint to ignore those.
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.