Bagaimanakah saya boleh membetulkan ralat TypeScript ini pada objek tetingkap aplikasi Vue saya?

Question

Dalam komponen aplikasi Vue 3 saya, saya perlu menggunakan beberapa sifat tersuai pada tetingkap seperti ini:

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

Tetapi saya mendapat ralat TypeScript pada ZohoHCAsapSettings:

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

Jadi saya cuba mengembangkan tetingkap seperti ini:

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

Ini akan menghapuskan ralat pada ZohoHCAsapSettings 上的错误，但会在 declare tetapi menjana satu lagi ralat pada deklarasikan dengan kandungan berikut:

Modifiers cannot appear here. ts(1184)

Saya baru menggunakan TypeScript jadi tidak pasti apa yang berlaku di sini.

Jika ia penting, saya menggunakan Kod Visual Studio sebagai IDE saya.

Ada idea?

Answer 1

Bagaimana pula dengan ini:

interface Window { ZohoHCAsapSettings?: unknown; }

Bekerja di sini: TS Playground

Answer 2

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

Jika anda menggunakan ruang nama npm init vue、npm init vite 或 Vue CLI 搭建的项目，关键是指定 global:

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