How To Fix The "Property does not exist on type Window" Error in TypeScript

There are a lot of strong opinions about TypesScript. I personally love using it and typically use it in all of my personal JavaScript projects. There is a slight learning curve though, especially if you are not used to using a typed language. Even past the learning curve, TypeScript can still be tricky to use when you find yourself with seemingly random type errors preventing you from doing what you want to with your code. A good example of this is the Property does not exist on type 'Window & typeof globalThis' error.

The Problem

This error occurs when you are working with TypeScript and a frontend application that has access to the window global object. Typically, you are trying to add something to that global object and found yourself with this error. Here’s an example:

window.hello = () => console.log("hello world");Code language: JavaScript (javascript)

As you can see this code should simply add this anonymous function to the hello property but instead it will throw the Property does not exist on type 'Window & typeof globalThis' error. This is actually perfectly acceptable JavaScript code that would work without TypesScript but if you want all the benefits of TypeScript then it looks like you’ll need to deal with this particular issue.

The Solution

First off, make sure you truly need a global variable on the window object. In many cases, this can be replaced with a reference to a variable in a module and while it certainly is not a black and white issue, avoiding global variables is considered a best practice in JavaScript.

That being said, sometimes it is unavoidable and that is fine. If that is the case, you will simply need to add typing for whatever you would like to add to the window object to its corresponding interface:

declare global {
  interface Window { // ⚠️ notice that "Window" is capitalized here
    hello: any;
  }
}

export const addWindowStuff = () => {
  window.hello = () => console.log("hello world");
};Code language: JavaScript (javascript)

This works and if you are satisfied with this solution then you can stop here but there are a few ways to improve it. First off, you should move your global declaration to a file called index.d.ts inside a folder called types at the root of your project. This is called a declaration file. So, if your code is in a directory called src, you’d want to add a file in this location src/types/index.d.ts. You will also need to add an export to the top of that file like so:

// types/index.ts
export {};

declare global {
  interface Window {
    hello: any;
  }
}Code language: PHP (php)

Finally, it is definitely a good idea to use an appropriate type for your global variable like so:

// types/index.ts
export {};

declare global {
  interface Window {
    hello: () => void;
  }
}Code language: PHP (php)

Conclusion

After following these steps you will have one less error to worry about. Now, go on and enjoy the type-checking benefits TypeScript has to offer. As always, feel free to recommend different solutions or leave any questions you may have in the comments below.