如何修复 Vue 应用程序的窗口对象上的这些 Typescript 错误？

Question

在我的 Vue 3 应用程序的组件中，我需要使用窗口上的一些自定义属性，如下所示：

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

但是我在 ZohoHCAsapSettings 上遇到 TypeScript 错误：

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

所以我尝试像这样扩展窗口：

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

这会消除 ZohoHCAsapSettings 上的错误，但会在 declare 上生成另一个错误，内容如下：

Modifiers cannot appear here. ts(1184)

我是 TypeScript 新手，所以不确定这里发生了什么。

如果重要的话，我正在使用 Visual Studio Code 作为我的 IDE。

有什么想法吗？

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; }
}