Svelte/SvelteKit+TypeScript给window添加属性报TS类型错误如何解决

核心原因 #

你之前的两种方案失效的常见原因：

• 第一种CustomWindow继承方案没有和全局Window类型做合并，也没有对window变量做显式类型断言，自然不会生效
• 第二种declare global方案失效大概率是三个问题：
  • 你的global.d.ts文件顶层有无关export/import声明，导致全局声明未生效
  • 你给onSubmit定义的类型不包含null，和你销毁时赋值null的逻辑冲突
  • tsconfig.json没有把global.d.ts文件包含进类型检查范围
  • TypeScript语言服务未刷新，缓存了旧的类型声明

正确配置步骤 #

步骤1：调整类型声明文件内容 #

把你的global.d.ts内容替换为以下代码，如果文件放在src目录下直接生效，放在根目录需要额外配置：

// 注意：如果这个文件没有其他需要导出的内容，不要加任何顶层export
interface Window {
  // 必须加 | null 匹配你销毁时赋值null的逻辑
  onSubmit: (() => void) | null;
}

如果你的global.d.ts里必须有其他导出内容，就用下面的写法：

// 加export {} 标记当前文件为模块，避免全局声明冲突
export {};
declare global {
  interface Window {
    onSubmit: (() => void) | null;
  }
}

步骤2：检查tsconfig配置 #

打开项目根目录的tsconfig.json，确保include数组包含了你的global.d.ts文件路径，示例配置：

{
  "compilerOptions": {
    // 原有配置保持不变
  },
  "include": ["src/**/*", "global.d.ts"]
}

步骤3：刷新类型服务 #

VSCode用户按Ctrl+Shift+P（Mac是Command+Shift+P），选择TypeScript: Restart TS Server，重启语言服务后即可生效。

临时替代方案 #

如果不想调整全局类型，可以直接用类型断言绕过检查：

onMount(() => {
  (window as any).onSubmit = onSubmit;
});

onDestroy(() => {
  (window as any).onSubmit = null;
});

内容的提问来源于stack exchange，提问作者user3291025