如何通过全局映射类型让TypeScript自动识别Webpack注入React应用的全局变量

嘿，我懂你的需求——已经用Webpack把全局变量注入到React应用里了，现在就想让TypeScript自动识别这些变量，不用每次都写window.xxx，还想用上映射类型的思路对吧？这就给你一步步解决：

第一步：从现有代码推导全局变量类型（避免重复定义） #

首先，我们可以直接从你已经写好的globals对象里自动推导类型，这样不用重复写结构，能保证类型和实际注入的变量完全一致：

// 假设你的globals文件路径是src/globals.ts
const globals = { 
  BACKEND_URL: 'https://example.com', 
  ENVIRONMENT: 'production' as const, // 用as const让类型更精准，限定为具体的环境值而非宽泛的string
  // 其他你注入的全局变量都加在这里
}; 
export default globals;

// 从globals对象自动推导类型
export type GlobalVariables = typeof globals;

第二步：扩展Window接口，让window对象识别变量 #

浏览器的全局上下文是window对象，TypeScript里Window是一个可扩展的接口，我们可以用接口合并的特性，把GlobalVariables的所有属性合并到Window上：

// 把这段代码放在src/types/global.d.ts这样的全局类型文件里（TypeScript会自动扫描.d.ts文件）
import type { GlobalVariables } from '../globals';

declare global {
  interface Window extends GlobalVariables {}
}

// 必须加这一行，否则TypeScript不会把这个文件当作模块处理
export {};

现在window.BACKEND_URL和window.ENVIRONMENT就会有完整的类型提示了。

第三步：声明全局变量，允许直接使用（不用window前缀） #

如果你想直接写ENVIRONMENT === 'production'而不用加window.，那我们需要在全局作用域里声明这些变量，告诉TypeScript它们是全局可用的。这里可以结合映射类型的思路，因为变量名对应GlobalVariables的键，所以我们可以这样做：

// 依然放在src/types/global.d.ts里
import type { GlobalVariables } from '../globals';

declare global {
  // 先扩展Window接口
  interface Window extends GlobalVariables {}

  // 声明每个全局变量，类型和Window上的属性保持一致
  var BACKEND_URL: Window['BACKEND_URL'];
  var ENVIRONMENT: Window['ENVIRONMENT'];
  // 其他全局变量照着这个格式添加就行
}

export {};

如果你的全局变量特别多，虽然TypeScript没法用映射类型自动生成声明语句（因为declare需要明确的变量名），但从维护角度来说，逐个声明反而更清晰，能一眼看到所有全局变量。

验证效果 #

现在你就可以直接在代码里轻松使用这些全局变量了：

// TypeScript会自动识别类型，不会报错
const isProduction = ENVIRONMENT === "production";
console.log(`请求后端地址：${BACKEND_URL}`);

而且之后如果你修改了globals里的变量，类型会自动同步更新，不用手动修改类型定义，非常省心！

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