时间戳

首页 > 解决方案 > TypeScript - 声明真正的全局变量以直接访问，没有窗口、全局或 globalThis

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

问题描述

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

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

我最远的就是在本地声明它：

declare const ENV_IS_PRODUCTION: boolean;

但我不知道如何在全球范围内声明它。我尝试将上述本地定义放入 globals.d.ts 但它不起作用。再说一次，我不能使用 window、global 或 globalThis。它必须作为变量直接访问，无需导入它，也无需使用窗口/全局。

标签： javascripttypescriptglobal-variables

解决方案

实际上，事实证明放在 globals.d.ts 中的本地定义应该可以工作。我只是遇到了一些 VS Code 没有启动的问题（在重新启动后工作，但我可能没有注意到，因为 Eslint 单独给出了一个错误 - 我仍然没有解决，但它相当小）。

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

declare const ENV_IS_PRODUCTION: boolean;

更新：

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

更新 2：

我要补充一点，它最初对我不起作用的另一个原因是，当我在一个 globals.d.ts 中有这个定义和关于 Window 对象的声明时，globals.d.ts 似乎有些问题 - 它也没有用。我决定使用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
};

推荐阅读