在<script>节点中先前加载的typescript中使用js对象

Question

我有一个用TypeScript编写的web应用程序，和webpack捆绑在一起。有一个纯javascript的配置文件，它简单地设置一个对象，如下所示：

var productsConfig = {
  "de": {
    currencySymbolPrefix: "",
    currencySymbolSuffix: " €", // space plus €
    currencySeparator: ",",
    products: {
      "1": { productTitle: "Product 1", productPrice: "0.95", productSize: "200g", productImgUrl: "img/1.jpg" },
      "2": { productTitle: "Product 2", productPrice: "0.95", productSize: "200g", productImgUrl: "img/2.jpg" },
    }
  }
};

此文件未与应用程序的其余部分捆绑在一起，而是在html中加载：

<script src="product_config.js"></script>

如何在TypeScript中使用productsConfig对象及其内容？如果我在TypeScript中用

declare const productsConfig: any;

然后我可以使用它，但原始内容会被重置。

Answer 1

在typescript中，您可以在此playground中看到，declare根本不会影响运行时。

因为typescript使用模块系统，所以productsConfig变量不是全局作用域，这就是它不起作用的原因。

要访问您定义的变量，可以使用window对象：window.productsConfig。

declare global {
    interface Window {
        productsConfig: any;
    }
}

在this question中可以看到更多。