如何修復 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; }
}