Property does not exist on type Window in TypeScript

avatar

Borislav Hadzhiev

Last updated: Jul 25, 2022

banner

Photo from Unsplash

Property does not exist on type Window in TypeScript #

The "Property does not exist on type 'Window & typeof globalThis'" error occurs when we access a property that does not exist on the Window interface. To solve the error, extend the Window interface in a .d.ts file and add the property you intend to access on the window object.

Here is an example of how the error occurs:

index.ts
// ⛔️ Property 'example' does not exist on // type 'Window & typeof globalThis'.ts(2339) window.example = 'hello'; console.log(window.example);

In your src directory, create a types directory that contains the following index.d.ts file:

src/types/index.d.ts
export {}; declare global { interface Window { example: string; } }
The code sample shows how to extend the Window interface with a property named example that has a type of string. This will be different in your use case, so make sure to adjust the property names and the types.

If you don't know the type of the specific property and want to turn off type checking, set it to any.

src/types/index.d.ts
export {}; declare global { interface Window { example: any; // 👈️ turn off type checking } }

Now I'm able to set and access the example property on the window object without getting the error.

index.ts
// ✅ Works now window.example = 'hello'; console.log(window.example);

If the error persists, try adding the path to your types directory to your tsconfig.json file.

tsconfig.json
{ "compilerOptions": { // ... rest "typeRoots": ["./node_modules/@types", "./src/types"] } }

We used the export {} line in our index.d.ts file to mark it as an external module. A module is a file that contains at least 1 import or export statement, so we are required to do that to be able to augment the global scope.

Note that you will have to change the contents of the provided index.d.ts file according to your use case.

You should add the names (and types) of all of the properties you intend to access on the window object.

src/types/index.d.ts
export {}; declare global { interface Window { example: string; } }

The provided file simply adds an example property with a type of string, which is most likely not what you need.

TypeScript looks for .d.ts files in the same places it looks for your regular .ts files, which is determined by the include and exclude settings in yourtsconfig.json file.

TypeScript will merge the declared from you Window interface with the original Window interface, so when you use the window object, you will be able to access properties from both interfaces.

Conclusion #

The "Property does not exist on type 'Window & typeof globalThis'" error occurs when we access a property that does not exist on the Window interface. To solve the error, extend the Window interface in a .d.ts file and add the property you intend to access on the window object.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.