如何使用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文件，它们是全局可见的。

您只能在这些文件中保留类型定义，但不能保留实现。

接下来的步骤将解决您的问题：

从global-variables.ts行import { thirdParty } from './global-variables';将

1. 重命名为global-variables.d.ts
2. remove export关键字