Nuxt+TypeScript项目如何解决window.__NUXT__不存在的类型报错

这里提供两种可行方案，你可以根据自己的需求选择：

1. 快速临时绕过 #

直接对window做类型断言，适合临时调试、不需要严格类型检查的场景，修改代码里的对应写法即可：

beforeMount() {
  const results =
    (this.$nuxt.context && this.$nuxt.context.nuxtState.algoliaState) ||
    (window as any).__NUXT__.algoliaState

  this.instantsearch.hydrate(results)

  // Remove the SSR state so it can't be applied again by mistake
  delete this.$nuxt.context.nuxtState.algoliaState
  delete (window as any).__NUXT__.algoliaState
},

这种方法修改成本低，但会丢失__NUXT__对象的类型校验能力。

2. 全局扩展Window类型（推荐） #

通过TypeScript的声明合并能力，给全局Window接口新增__NUXT__属性的类型定义，一劳永逸解决报错，还能支持类型提示：

• 在项目根目录新建全局声明文件，命名为global.d.ts或者nuxt.d.ts
• 在文件中写入以下代码：

declare global {
  interface Window {
    // 如果你清楚__NUXT__的完整结构，可以把any替换成具体的类型定义
    __NUXT__: any
    // 示例：只定义你用到的属性，实现更严格的校验
    // __NUXT__: {
    //   algoliaState: Record<string, any>
    // }
  }
}
// 加这行是为了让TS将文件识别为模块，保证全局声明生效
export {}

• 检查项目的tsconfig.json，确保include配置项包含了这个声明文件，比如：

{
  "include": ["*.d.ts", "**/*.ts", "**/*.vue"]
}

配置完成后重启编辑器的TypeScript服务即可，后续所有访问window.__NUXT__的位置都不会再报类型错误。

内容的提问来源于stack exchange，提问作者J. Hesters