搜尋

首頁  >  問答  >  主體

如何修復 Vue 應用程式的視窗物件上的這些 Typescript 錯誤?

在我的 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。

有什麼想法嗎?

P粉344355715P粉344355715384 天前604

全部回覆(2)我來回復

  • P粉130097898

    P粉1300978982023-12-07 18:03:50

    這樣做怎麼樣:

    interface Window { ZohoHCAsapSettings?: unknown; }
    

    在這裡工作:TS 遊樂場< /p>

    回覆
    0
  • P粉314915922

    P粉3149159222023-12-07 10:30:51

    如 @Buszmen 所指出的, 全域 Window 介面應該使用新屬性來擴充。類型宣告通常儲存在自己的 .d.ts 檔案中(例如,全域變數為 src/globals.d.ts)。

    如果您使用的是 npm init vuenpm init vite 或 Vue CLI 搭建的項目,關鍵是指定 global 命名空間:

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

    回覆
    0
  • 取消回覆