开启strict模式时，访问Window环境变量遇'any类型'报错的解决办法

我尝试从Window对象读取环境变量，在env.js文件中通过自执行函数设置变量：

(function(window) {
  window["env"] = window["env"] || {};

  window["env"]["apiURL"] = "https://localhost:44388";
})(this);

随后在env.dev.ts文件中尝试读取该变量：

const apiUrl= window['env']['apiURL'];

export const environment = {
  url: {
    apiBaseUrl: `${apiUrl}`,
  },
};

此时env.dev.ts文件中['env']处出现红线报错，提示信息为：Element implicitly has an 'any' type because index expression is not of type 'number'。已知可通过将tsconfig.json中的strict设为false解决，但希望保持strict:true；也可以抑制警告，但这种方式不够规范。请问是否有其他读取apiURL变量的方法？

1. 扩展Window接口类型 #

TypeScript默认不知道Window对象上存在env属性，你可以通过声明全局接口来扩展Window的类型定义：

在项目中创建types目录，新增window.d.ts文件（或在现有类型文件中添加），内容如下：

interface Window {
  env?: {
    apiURL?: string;
  };
}

完成后TypeScript就能识别window.env的类型，读取时可结合可选链和空值合并处理未定义的情况：

const apiUrl = window.env?.apiURL ?? '默认API地址';

export const environment = {
  url: {
    apiBaseUrl: `${apiUrl}`,
  },
};

2. 使用类型断言 #

如果不想新增类型文件，可直接在读取时用类型断言明确告知TypeScriptwindow的结构：

// 更严格的类型断言
const apiUrl = (window as Window & { env?: { apiURL?: string } }).env?.apiURL ?? '默认API地址';

也可以用简化版的any断言，但这种方式类型安全性稍弱：

const apiUrl = (window as any).env?.apiURL ?? '默认API地址';

3. 借助构建工具注入变量（可选） #

如果使用Webpack、Vite等构建工具，可直接通过插件（如Webpack的DefinePlugin）将环境变量编译注入到代码中，无需通过Window对象传递。但这种方式需要调整构建配置，适合从源头改变变量注入逻辑的场景。

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