如何在 React 中安全检测全局变量是否存在（ESLint 兼容方案）

本文介绍在 create react app 项目中，如何在 eslint 严格模式下安全检查动态注入的全局变量（如第三方脚本挂载的对象），避免 `undefined` 引用报错，同时保持代码可维护性与类型安全性。

在 react 应用中，有时需接入外部系统（如营销平台、A/B 测试 SDK 或旧版页面注入的配置对象），这些系统会将变量直接挂载到 window 对象上，例如 window.componentObj。由于该变量并非由 React 或 webpack 打包生成，typescript 不识别、ESLint（尤其是 no-undef 规则）也会将其视为未声明的非法引用——即便你已通过 typeof 做了存在性判断，ESLint 仍会在 else 分支中报错：’componentObj’ is not defined。

根本原因在于：ESLint 是静态分析工具，它不执行运行时逻辑，因此无法理解 typeof componentObj === “undefined” 已隐含类型守卫作用。它独立检查每行代码中的标识符是否在作用域内声明，而 componentObj 未被 var/let/const 或类型声明文件定义，故触发警告。

✅ 推荐解决方案（按优先级排序）：

1. 显式访问 window 对象（最推荐）
将全局变量视为 window 的属性，既符合浏览器环境事实，又通过点号访问绕过 no-undef 检查：

// ✅ 正确：ESLint 可识别 window 是全局对象 if (typeof window.componentObj === 'undefined') {   message = 'Default message'; } else {   message = window.componentObj.message; // 无 ESLint 报错 }

进一步增强健壮性（防御性编程）：

const componentObj = window.componentObj; if (componentObj && typeof componentObj.message === 'string') {   message = componentObj.message; } else {   message = 'Default message'; }

2. 类型声明 + window 扩展（TypeScript 项目适用）
在 src/react-app-env.d.ts 中添加全局接口声明：

declare global {   interface Window {     componentObj?: {       message: string;       title?: string;       // 其他预期字段...     };   } }

之后即可安全使用 window.componentObj?.message（支持可选链），ESLint 和 TypeScript 均无警告。

3. 按需禁用 ESLint（次选，仅限临时或遗留场景）
若因历史约束无法修改访问方式，可用内联注释精准关闭规则：

if (typeof componentObj === 'undefined') {   message = 'Default message'; } else {   // eslint-disable-next-line no-undef   message = componentObj.message; }

⚠️ 注意：避免使用宽泛的 // eslint-disable-line（易掩盖其他问题），优先指定规则名；且禁止在函数顶部或大范围区域禁用（如 /* eslint-disable no-undef */）。

总结建议：

• 永远优先通过 window.xxx 访问全局变量 —— 语义清晰、ESLint 友好、符合规范；
• 在 TypeScript 项目中，务必补充 window 接口声明，获得完整类型提示与编译时检查；
• 避免依赖 // eslint-disable-* 作为常规方案，它应是过渡手段而非设计模式；
• 若全局变量由