Comment corriger ces erreurs Typescript sur l'objet fenêtre de mon application Vue ?

Question

Dans un composant de mon application Vue 3, je dois utiliser certaines propriétés personnalisées sur la fenêtre comme ceci :

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

Mais je reçois une erreur TypeScript sur ZohoHCAsapSettings :

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

J'ai donc essayé d'agrandir la fenêtre comme ceci :

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

Cela éliminera l'erreur sur ZohoHCAsapSettings 上的错误，但会在 declare mais générera une autre erreur sur declare avec le contenu suivant :

Modifiers cannot appear here. ts(1184)

Je suis nouveau sur TypeScript, donc je ne sais pas ce qui se passe ici.

Si c'est important, j'utilise Visual Studio Code comme IDE.

Des idées ?

Answer 1

Que diriez-vous de ceci :

interface Window { ZohoHCAsapSettings?: unknown; }

Travailler ici : TS Playground< /p>

Answer 2

Comme @Buszmen l'a souligné, mondial Window 接口应该使用新属性进行扩展。类型声明通常存储在自己的 .d.ts 文件中（例如，全局变量为 src/globals.d.ts).

Si vous utilisez l'espace de noms npm init vue、npm init vite 或 Vue CLI 搭建的项目，关键是指定 global :

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