How to fix these Typescript errors on the window object of my Vue app?-CodePudding

In a component of my Vue 3 app I need to work with some custom properties on the Window, like this:

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

But I get a TypeScript error on ZohoHCAsapSettings:

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

So I tried extending the window like so:

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

This removes the error on ZohoHCAsapSettings but generates another error on declare that says:

Modifiers cannot appear here. ts(1184)

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

I am using Visual Studio Code as my IDE if that matters.

Any ideas?

CodePudding user response：

As @Buszmen pointed out, the global Window interface should be augmented with the new property. Type declarations are usually stored in their own .d.ts file (e.g., src/globals.d.ts for global variables).

And if you're using a project scaffolded from npm init vue, npm init vite, or Vue CLI, the key is to specify the global namespace:

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

CodePudding user response：

How about doing like this:

interface Window { ZohoHCAsapSettings?: unknown; }

Works here: TS Playground