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

Posted 2023-02-23

【中文标题】打字稿：使用类型进行显式导入

【英文标题】：Typescript: use types for explicit import

【发布时间】：2019-03-04 12:05:45

【问题描述】：

我正在使用 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 包。代码通过自动完成和正确的类型检查编译而没有错误。但在运行时，它不起作用。另一方面，通过导入，编译器警告我他找不到包的类型定义。代码仍然可以编译，但浏览器的类型是 any。所以我没有得到任何自动完成和静态类型检查。

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

【参考方案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;