如何在 React 中安全检测全局变量存在性（规避 ESLint 报错）

本文介绍在 create react app 项目中安全检测运行时存在的全局变量的方法，解决 eslint 因未声明变量而报错的问题，涵盖 `typeof` 检测、`window` 显式访问、类型断言及注释禁用等合规实践。

在 React 应用中，有时需依赖外部注入的全局对象（例如由 CDN 加载的第三方库、服务端渲染注入的初始数据，或微前端场景下的宿主环境变量）。这类变量在编译期并不存在于模块作用域中，因此直接引用（如 componentObj.message）会触发 ESLint 的 no-undef 规则报错——即使运行时该变量可能已存在。

最推荐且语义清晰的解决方案是显式通过 window 对象访问全局变量，并配合 typeof 检测：

// ✅ 推荐：语义明确、类型安全、ESLint 友好
if (typeof window.componentObj === 'undefined') {
  message = 'Default message';
} else {
  message = window.componentObj.message;
}

此写法明确表明 componentObj 是挂载在 window 上的全局属性，ESLint 能正确识别其来源，不会误报 no-undef。同时，TypeScript 用户还可进一步增强类型安全性：

// ✅ TypeScript 进阶：为 window 扩展声明类型（推荐在 global.d.ts 中添加）
declare global {
  interface Window {
    componentObj?: { message: string; title?: string };
  }
}

若因特殊原因无法修改全局声明或需快速验证，也可使用 in 操作符：

if (!('componentObj' in window)) {
  message = 'Default message';
} else {
  message = window.componentObj.message;
}

⚠️ 注意事项：

• 避免滥用 // eslint-disable-line（如 componentObj.message; // eslint-disable-line），它虽能绕过检查，但掩盖了潜在风险，降低代码可维护性与类型安全性；
• 不要使用 if (componentObj) 等真值判断，因 null、undefined、false、0、'' 均为 falsy，可能导致误判；
• 在服务端渲染（SSR）环境中，window 未定义，务必增加 typeof window !== 'undefined' 的双重防护。

总结：始终优先通过 window.xxx 显式访问全局变量，并结合 typeof 或 in 检测，既满足 ESLint 规范，又保证运行时健壮性。这是现代 React 工程中处理动态全局依赖的标准实践。