Проблема импорта ResizeSensor в typescript

#typescript

#typescript

Вопрос:

Я пытаюсь использовать css-element-queries / ResizeSensor в моем приложении typescript с webpack.

Я добавил npm, и npm включает в себя файл .d.ts. Проблема в том, что когда я печатаю это:

 new ResizeSensor(element, cb);
  

компилятор typescript генерирует:

 new ResizeSensor_1.default(element, cb);
  

и, конечно, это неверно. ResizeSensor возвращает один класс, и правильный код, который TS должен создать, является:

 new ResizeSensor_1(element, cb);
  

Файл ResizeSensor.d.ts содержит:

 export declare type ResizeSensorCallback = (size: { width: number; height: number; }) => void;

declare class ResizeSensor {
    constructor(element: Element | Element[], callback: ResizeSensorCallback);
    detach(callback?: ResizeSensorCallback): void;
    reset(): void;

    static detach(element: Element | Element[], callback?: ResizeSensorCallback): void;
    static reset(element: Element | Element[]): void;
}

export default ResizeSensor;
  

и я импортирую его следующим образом:

 import ResizeSensor from 'css-element-queries/src/ResizeSensor';
  

TS жалуется, если я помещаю ResizeSensor в {}, и я перепробовал все другие формы инструкции import, о которых я знаю.

Мой файл tsconfig.json включает в себя следующие параметры:

 "target": "es5"
  

и

 "module": "amd"
  

Есть предложения?

Ответ №1:

Попробуйте использовать esModuleInterop опцию компилятора
https://www.typescriptlang.org/docs/handbook/compiler-options.html

Комментарии:

1. к сожалению, это ничего не изменило. Это добавило значение _importDefault в начало выходного файла, но это вообще не изменило вызывающий сайт, в чем и заключается проблема.

2. Кроме того, включение этого параметра полностью нарушило весь мой существующий импорт