Vue3+TypeScript中使用window对象出现“Cannot find name 'window'”错误的求助

嘿，我之前也踩过这个坑！其实TypeScript在某些场景下（比如严格模式开启、或者项目配置里没引入DOM相关类型库）会默认不识别window这个浏览器全局对象，别慌，几个简单的方法就能搞定：

方法1：检查并调整tsconfig.json配置 #

首先看看你的tsconfig.json里的compilerOptions字段，有没有把DOM加到lib数组中——因为window属于浏览器DOM API的一部分，TypeScript需要依赖这个类型库才能识别它：

{
  "compilerOptions": {
    "lib": ["ESNext", "DOM", "DOM.Iterable"]
    // 其他原有配置保持不变
  }
}

保存配置后，记得重启一下IDE的TypeScript语言服务（或者直接重启IDE），大部分情况下这就能解决报错了。

方法2：在组件内做安全判断+类型处理 #

如果只是单个组件用到window，或者你不想改动全局配置，可以先判断window是否存在（毕竟在SSR服务端渲染场景下window是不存在的，这样写也更健壮），同时让TypeScript明确它的类型：
修改你这段computed代码试试：

<script setup lang="ts">
import { useRouter } from 'vue-router';
import { computed } from 'vue';

const router = useRouter();
const visibleRoutes = computed(() => {
  // 先判断window是否存在，避免非浏览器环境报错
  if (typeof window === 'undefined') return [];
  
  return router.options.routes.filter((route) => 
    route.meta?.showInNavBar === true && 
    (
      (route.meta?.requireSSL === true && window.location.protocol === 'https:') || 
      window.location.hostname === 'localhost' || 
      route.meta?.requireSSL === false
    )
  );
});
</script>

要是你确定项目只会在浏览器环境运行，也可以直接用(window as Window)做类型断言，快速让TS停止报错。

方法3：添加全局类型声明文件 #

如果需要在多个组件里使用window，甚至要给它扩展自定义属性，可以在项目里创建一个全局类型声明文件，比如src/types/global.d.ts，内容如下：

declare global {
  interface Window {
    // 这里可以扩展你需要的自定义属性，比如：
    // appVersion: string;
  }
}

export {};

TypeScript会自动识别这个声明文件，之后整个项目里都能正常使用window，还能给它的自定义属性加上类型提示。

试试上面的方法，应该能顺利解决你的报错问题！

内容来源于stack exchange