TypeScript ESLint报google未定义，类型标注场景修复无效如何解决？

问题原因 #

你遇到的报错是两个层面的规则校验叠加导致的：

• ESLint的no-undef规则会校验所有代码中出现的标识符是否有合法声明，包括TypeScript类型标注里的标识符。你手动声明的const google = window.google;属于运行时变量声明，ESLint会认为类型标注中使用的google和该运行时变量无关联，因此依然会抛出未定义错误。
• TypeScript静态分析阶段无法识别全局google对象的类型，也会额外触发类型未定义的报错。

解决方案 #

步骤1：安装TypeScript类型定义（仅TS项目需要，纯JS项目可跳过）

先安装Google Maps官方维护的类型包，让TypeScript可以识别所有google.maps下的类型定义：

npm install --save-dev @types/google.maps

如果使用yarn/pnpm，执行对应包管理器的安装命令即可。

步骤2：配置ESLint识别全局google变量

二选一即可，推荐全局配置：

• 方案1：全局生效配置
  在项目根目录的ESLint配置文件（.eslintrc.js、.eslintrc.json等）中添加全局变量声明：

module.exports = {
  // 保留你的其他原有ESLint配置
  globals: {
    google: "readonly"
  }
}

• 方案2：单文件生效配置
  如果只需要在当前文件中规避报错，在文件最顶部添加注释即可：

/* global google */

步骤3：验证生效

配置完成后重启ESLint服务（VSCode中可执行命令面板的「ESLint: Restart ESLint Server」，或者直接重启编辑器），所有google未定义的报错都会消失，你之前手动添加的const google = window.google;也可以直接删除。

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