Wie behebe ich diese Typescript-Fehler im Fensterobjekt meiner Vue-Anwendung?

Question

In einer Komponente meiner Vue 3-Anwendung muss ich einige benutzerdefinierte Eigenschaften im Fenster verwenden, etwa so:

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

Aber ich erhalte einen TypeScript-Fehler bei ZohoHCAsapSettings:

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

Also habe ich versucht, das Fenster wie folgt zu erweitern:

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

Dadurch wird der Fehler bei ZohoHCAsapSettings 上的错误，但会在 declare behoben, es wird jedoch ein weiterer Fehler bei declare mit folgendem Inhalt generiert:

Modifiers cannot appear here. ts(1184)

Ich bin neu bei TypeScript und daher nicht sicher, was hier los ist.

Wenn es darauf ankommt, verwende ich Visual Studio Code als meine IDE.

Irgendwelche Ideen?

Answer 1

这样做怎么样：

interface Window { ZohoHCAsapSettings?: unknown; }

在这里工作：TS 游乐场

Answer 2

正如 @Buszmen 指出的， 全局 Window 接口应该使用新属性进行扩展。类型声明通常存储在自己的 .d.ts 文件中（例如，全局变量为 src/globals.d.ts）。

如果您使用的是 npm init vue、npm init vite 或 Vue CLI 搭建的项目，关键是指定 global 命名空间：

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