How do I fix these Typescript errors on my Vue application's window object?

Question

In the components of my Vue 3 application, I need to use some custom properties on the window like this:

window.ZohoHCAsapSettings = { //<-- ERROR HERE
  ticketsSettings: {
    preFillFields: {
      email: {
        defaultValue: user.value?.email,
      },
    },
  },
};

But I'm getting a TypeScript error on ZohoHCAsapSettings:

Property 'ZohoHCAsapSettings' does not exist on type 'Window & typeof globalThis'. ts(2339)

So I try to expand the window like this:

interface customWindow extends Window {
  ZohoHCAsapSettings?: unknown;
}
declare const window: customWindow; //<-- ERROR HERE
window.ZohoHCAsapSettings = {
  ticketsSettings: {
    preFillFields: {
      email: {
        defaultValue: user.value?.email,
      },
    },
  },
};

This will eliminate the error on ZohoHCAsapSettings but generate another error on declare with the following content:

Modifiers cannot appear here. ts(1184)

I'm new to TypeScript, so not sure what's going on here.

If it matters, I'm using Visual Studio Code as my IDE.

Any ideas?

Answer 1

How about this:

interface Window { ZohoHCAsapSettings?: unknown; }

Work here: TS Playground< /p>

Answer 2

As @Buszmen pointed out, the global Window interface should be extended with new properties. Type declarations are usually stored in their own .d.ts files (for example, global variables are src/globals.d.ts).

If you are using npm init vue, npm init vite or a project built by Vue CLI, the key is to specify the global namespace:

// src/globals.d.ts
declare global {
  interface Window { ZohoHCAsapSettings?: unknown; }
}