Typescript: использовать типы для явного импорта

Question

Я программирую webextension в Typescript.Поскольку я хотел бы настроить таргетинг как на Chrome, так и на Firefox, мне нужно это polyfill .

Импорт выглядит так:

import browser from "webextension-polyfill"

Typescript жалуется could not find a declaration file for webextension-polyfill.Но есть модуль npm с определениями типов: @types/firefox-webext-browser.Я установил этот модуль.

Мне нужен импорт, так как я использую пакет для упаковки всего этого кода.Если я не импортирую явным образом полизаполнение, то упаковщик не получит зависимость, и во время выполнения полифила там не будет (плохо в chrome).

Это создает забавную ситуацию: без импортакомпилятор машинописи автоматически подхватывает пакет @types.Код компилируется без ошибок с автозаполнением и корректной проверкой типов.Но во время выполнения это не работает.С другой стороны, при импорте компилятор предупреждает меня, что он не может найти определения типов для пакета.Код все еще компилируется, но браузер имеет тип any.Поэтому я не получаю никакой автозаполнения и статической проверки типов.

Мой вопрос: могу ли я позволить пакету в @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;
}