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.
Consulting
If you're seeking solutions to a problem or need expert advice, I'm here to help! Don't hesitate to book a call with me for a consulting session. Let's discuss your situation and find the best solution together.
Related Posts
Inject HTML content into an Astro component
While working on a project within the Astro framework, I encountered a scenario where I needed to fill HTML content within a script tag.
Formatting Big Numbers in JavaScript
When working with large numerical values in JavaScript, it can be challenging to display them in a way that's easy to read and understand. In this blog post, we'll explore techniques for formatting big numbers in JavaScript with built-in methods.
Formatting Big Numbers in JavaScript
When working with large numerical values in JavaScript, it can be challenging to display them in a way that's easy to read and understand. In this blog post, we'll explore techniques for formatting big numbers in JavaScript with built-in methods.
Featured Posts
Introducing new blog on OAuth, OpenID Connect, and IAM Solutions
I'm excited to announce the launch of a new blog named CerberAuth, where I'll be exploring the world of OAuth, OpenID Connect, and IAM solutions for modern security.
MySQL Docker Image for Mac ARM M1
MySQL official Docker image is not available for Apple ARM-based M1 and M2 CPUs. But there is some options to use mysql image on Mac and more globally on ARMv8 microarchitecture.
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.