如何使用 webpack 在打字稿中导入声明的全局变量

Question

我在导入声明的全局变量时遇到问题。

在我们的网站上，我们有第三方框架，它仅使用标签集成并在窗口上创建全局变量，例如window.thirdParty。所以用法是这样的：thirdParty.methodOne()我写了定义文件第三方.d.ts，如下所示：

import { ITrirdPartyFramework } from './third-party-definitions/third-party-framework';
export interface ITrirdPartyFramework {
methodOne():void,
}

然后我有一个文件(global-variables.ts(，它定义了全局变量：

export declare const thirdParty: ITrirdPartyFramework;

最后，我想在我的模块中使用它：

import { thirdParty } from './global-variables';
export const myFunction = () => {
thirdParty.methodOne();
}

问题是 webpack 将定义编译为常规模块，并且在运行时出现错误，因为编译的代码如下所示：

_global_variables__WEBPACK_IMPORTED_MODULE_3__["thirdParty"].methodOne();

而不是

thirdParty.methodOne();

你知道吗，如何告诉 webpack 忽略定义或如何处理这种情况？

Answer 1

您不必导入 *.d.ts 文件，它们是全局可见的。
只能在这些文件中保留类型定义，而不能保留实现

后续步骤将解决您的问题：

1. 将global-variables.ts重命名为global-variables.d.ts
2. 从全局变量中删除export关键字.d.ts
3. 删除行import { thirdParty } from './global-variables';