How do I fix these Typescript errors on my Vue application's window object?
P粉344355715
P粉344355715 2023-12-06 20:46:24
0
2
600

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?

P粉344355715
P粉344355715

reply all(2)
P粉130097898

How about this:

interface Window { ZohoHCAsapSettings?: unknown; }

Work here: TS Playground

P粉314915922

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; }
}
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template