TypeScript-声明真正的全局变量以直接访问，无需窗口、全局或globalThis

Question

我想将一些环境变量传递给前端应用程序。作为构建过程的一部分，它们通过替换传递，例如：if (ENV_IS_PRODUCTION) { ... }在编译后的bundle中将求值为：if (false) { ... }(因此它可以被minifier完全剥离(。

现在我需要一些方法来告诉TypeScriptENV_IS_PRODUCTION是一个布尔值。我想直接使用它，window.ENV_IS_PRODUCTION会计算为window.false，所以它不是一个选项。

我用它做的最远的事情就是在当地申报：

declare const ENV_IS_PRODUCTION: boolean;

但我不知道如何在全球范围内宣布它。我试着把上面的局部定义放到globals.d.ts中，但它不起作用。再说一遍，我不能使用window、global或globalThis。它必须作为变量直接访问，而不必导入它，也不需要使用window/global。

Answer 1

事实证明，放入globals.d.ts的本地定义应该有效。我只是遇到了一些VS Code无法接收的问题(在重新启动后工作，但我可能没有注意到，因为Eslint单独给出了一个错误——我还没有解决，但它很小(。

因此，在这种情况下，解决方案是简单地将其放在globals.d.ts:中

declare const ENV_IS_PRODUCTION: boolean;

更新：

造成混乱的Eslint错误是因为Eslnt似乎无法识别这样定义的类型。解决方案是对所有TypeScript文件禁用无undef规则-它无论如何都是多余的，因为tsc无论如何都不允许未定义的变量。https://github.com/typescript-eslint/typescript-eslint/issues/342

更新2:

我要补充的是，它最初对我不起作用的另一个原因是，globals.d.ts似乎有问题。当我在一个globals.d.t中有这个定义和关于Window对象的声明时，它也不起作用。我决定使用compilerOptions.typeRoots，并将类型文件放在那里，而不是使用globals.d.ts，它运行得很好。

因此，最好的解决方案是：

tsconfig.json

{
...
"compilerOptions": {
...
"typeRoots": [
"./node_modules/@types",
"./src/types"
]
}
}

src/types/env.d.ts

declare const ENV: {
IS_PRODUCTION: boolean
};