打字稿：使用类型进行显式导入

Question

我正在用Typescript编程一个webextension。由于我想同时定位Chrome和Firefox，因此我需要polyfill。

导入看起来像这样：

import browser from "webextension-polyfill"

打字稿抱怨could not find a declaration file for webextension-polyfill。 但是，有一个npm模块具有类型定义：@types/firefox-webext-browser。我已经安装了这个模块。

我需要导入，因为我正在使用捆绑程序来打包所有这些代码。如果我未明确导入polyfill，则捆绑程序将不会获取依赖关系，并且在运行时，polyfill不存在（在chrome中无效）。

这会带来一个有趣的情况：如果没有导入，则打字稿编译器会自动选择@types包。通过自动完成和正确的类型检查，代码可以正确编译。但是在运行时，它不起作用。另一方面，在导入时，编译器警告我他找不到该包的类型定义。该代码仍然可以编译，但是浏览器是任何类型。所以我没有任何自动完成和静态类型检查。

我的问题是：我可以让@types中的包覆盖import语句吗？

Answer 1

@types/firefox-webext-browser声明browser为全局命名空间，但是您的导入使此全局声明成为阴影。您需要告诉TypeScript webextension-polyfill的默认导出与此全局名称空间相同。您可以通过以下代码创建单独的文件declarations.d.ts：

declare module "webextension-polyfill" {
    // Refers to the global `browser` and exports it as the default of `webextension-polyfill`.
    export default browser;
}