本文介绍在 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-* 作为常规方案，它应是过渡手段而非设计模式；
- 若全局变量由 <script> 动态注入，建议配合 useEffect + window.addEventListener('load', ...) 或 MutationObserver 确保时机安全，而非在组件顶层直接读取。</script>
