TypeScript

Question

我想将一些环境变量传递给前端应用程序。它们作为构建过程的一部分通过替换传递，例如： 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。它必须作为变量直接访问，无需导入它，也无需使用 window/global.

Answer 1

实际上，放入 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
};

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

TypeScript - declare truly global variable to access directly, no window, global or globalThis

javascript

global-variables

更新：

更新 2：