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

Question

我正在用 Typescript 编写一个网络扩展程序。因为我想同时针对 Chrome 和 Firefox，所以我需要这个 polyfill.

导入看起来像这样：

import browser from "webextension-polyfill"

Typescript 抱怨 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;
}

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

Typescript: use types for explicit import

typescript

typescript-definitions