typescript - 无法将环境变量从 Webpack 配置提供给 Angular 2

在我的 Webpack 配置中，我有以下内容。

var config = require("./webfig");
config.module = config.module || [];
config.plugins.push(new webpack.DefinePlugin({ "Hazaa": "Shazoo" }));
module.exports = config;

然而，在 TS 文件中，当我尝试使用下面的行访问它时，编译器抱怨说这种东西不可用。我不太确定如何排查这个问题，而谷歌搜索对这个具体问题也没有提供太多有价值的信息（就我识别诊断结果而言）。

我如何在 TypeScript 代码中访问 Hazaa？

编辑

根据评论，我已经引入了以下更改。

config.plugins.push(new webpack.DefinePlugin({ "Hazaa": JSON.stringify("Shazoo") }));

在与预先存在的 index.d.ts 相同的目录中创建了一个名为 app.d.ts 的文件。它只包含 declare var Hazaa: string;，我通过 typings.json 这样引用它。

{
  "globalDependencies": {
    "core-js": "registry:dt/core-js#0.9.7+20161130133742",
    "app": "file:./typings/app.d.ts"
  }
}

我也参考了 tsconfig.json 中的 files 部分，如下所示。

{
  "compilerOptions": {
    "baseUrl": "./source/application",
    "target": "es5",
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true
  },
  "files": [
    "typings/index.d.ts",
    "typings/app.d.ts"
  ],
  "include": [ "source/**/*" ],
  "exclude": [ "node_modules" ]
}

没有任何帮助——当我在组件的构造函数中执行 console.log(Hazaa) 时，我得到编译时错误，提示找不到该名称。

答案＃1

由于 TypeScript 并不知道 webpack 的全局变量（由 DefinePlugin 定义的变量），这些变量会在你构建项目时注入到代码中，因此会报错。你必须告诉 TypeScript，Hazaa 是一个在构建时会被计算的字符串类型变量。

所以用你的 .d.ts 文件声明 Hazaa。

declare var Hazaa: string;