前端 - electron+react+ts项目中，为何在renderer/下会直接找不到变量（但是实际能使用，只是提示找不到）？

Question

我发现在一个现有项目（electron+react+ts）中，可以直接写window，没有提示找不到：

但是我新建立一个electron+react+ts项目，在renderer/下会直接找不到变量（但是实际能使用，只是提示找不到）：

我测试发现：纯react+ts项目都没有此问题。（没有renderer/目录的包裹）

请问要想没有此提示是需要额外配置什么吗？

Answer 1

在 Electron + React + TypeScript 的项目中，如果你在 renderer/ 目录下遇到 TypeScript 提示找不到某些全局变量（如 window、document 等）的情况，这通常是因为 TypeScript 的类型检查默认不包括 DOM 或 Node.js 的全局类型。虽然这些全局变量在 Electron 的渲染进程中实际上是可用的，但 TypeScript 需要一些额外的配置来识别它们。

为了解决这个问题，你可以在 TypeScript 配置文件（通常是 tsconfig.json）中添加或修改一些设置。以下是一些可能的解决方案：

1. 添加 "dom" 到 "lib" 数组中：
   这将使 TypeScript 包含 DOM 相关的类型定义。对于 Electron 应用，这通常是必要的，因为 Electron 的渲染进程是基于 Chromium 的，它支持 DOM API。

   {
     "compilerOptions": {
       "lib": ["dom", "es6", "dom.iterable", "scripthost"],
       // 其他配置...
     }
     // 其他配置...
   }

2. 确保 TypeScript 版本正确：
   确保你使用的 TypeScript 版本支持你的项目需求。虽然这个问题通常与版本关系不大，但有时候更新到最新版本的 TypeScript 可以解决一些兼容性问题。
3. 在项目中显式声明全局变量：
   如果你需要 TypeScript 识别非标准全局变量（虽然在这个情况下 window 和 document 是标准的），你可以在项目的某个类型定义文件中（如 global.d.ts）声明它们。但在这个案例中，通常不需要这样做，因为它们是 DOM 的一部分。
4. 检查 IDE 或编辑器设置：
   有时候，IDE 或代码编辑器的 TypeScript 插件可能需要重启或更新才能正确反映 tsconfig.json 的更改。确保你的开发环境是最新的，并且已经重新加载了项目。
5. 使用 Electron 相关的 TypeScript 类型定义：
   虽然这通常不是解决 window 或 document 找不到问题的直接方法，但如果你在使用 Electron 特定的 API 时遇到类型问题，考虑安装和使用像 @types/electron 这样的类型定义。

在大多数情况下，添加 "dom" 到 "lib" 数组中应该能够解决你的问题。如果问题仍然存在，请检查你的 tsconfig.json 文件是否在其他地方有冲突的配置。