Use resize-detector element library in Angular2 application

Question

I am trying to use the element-resize-detector library ( https://github.com/wnr/element-resize-detector ) in an Angular2 application.

From my limited knowledge of the JS module, the library seems to be in CommonJS format. After several attempts, I created the following definition file (* .d.ts):

declare module ResizeDetector { function ResizeDetector(options: any): ResizeDetector.Erd; interface Erd { listenTo(element: any, resizeCallback: any): void; uninstall(element: any): void; } } export = ResizeDetector; 

Then I use the following import statement in my TypeScript code:

 import * as ResizeDetector from 'element-resize-detector'; 

When starting my application and using console.log('ResizeDetector', ResizeDetector) following output is written:

 ResizeDetector function (options) { options = options || {}; //idHandler is currently not an option to the listenTo function, so it should not be added to globalOptions. var idHandler; if (options.… 

This shows me that the library loaded successfully and returns the function as expected.

My question is: how can I start using a library in TypeScript? When I try something like:

 private static resizeDetector = ResizeDetector({ strategy: 'scroll' }); 

I get the following forwarding error:

 error TS2349: Cannot invoke an expression whose type lacks a call signature. 

Answer 1

element-resizing-detector.d.ts

 declare function elementResizeDetectorMaker(options?: elementResizeDetectorMaker.ErdmOptions): elementResizeDetectorMaker.Erd; declare namespace elementResizeDetectorMaker { interface ErdmOptions { strategy?: 'scroll' | 'object'; } interface Erd { listenTo(element: HTMLElement, callback: (elem: HTMLElement) => void); removeListener(element: HTMLElement, callback: (elem: HTMLElement) => void); removeAllListeners(element: HTMLElement); uninstall(element: HTMLElement); } } export = elementResizeDetectorMaker; 

Consumer

 let resizeDetector = elementResizeDetectorMaker({ strategy: 'scroll'}); resizeDetector.listenTo(document.getElementById('abc'), (elem: HTMLElement) => { console.log(elem.offsetWidth, elem.offsetHeight); }) 

Answer 2

Based on @ stone-shi's answer, here is how I got it to work:

Definition File:

 declare module 'element-resize-detector' { function elementResizeDetectorMaker(options?: elementResizeDetectorMaker.ErdmOptions): elementResizeDetectorMaker.Erd; namespace elementResizeDetectorMaker { interface ErdmOptions { strategy?: 'scroll' | 'object'; } interface Erd { listenTo(element: HTMLElement, callback: (elem: HTMLElement) => void): void; removeListener(element: HTMLElement, callback: (elem: HTMLElement) => void): void; removeAllListeners(element: HTMLElement): void; uninstall(element: HTMLElement): void; } } export = elementResizeDetectorMaker; } 

Ts file

 import * as elementResizeDetectorMaker from 'element-resize-detector'; let _elementResizeDetector = elementResizeDetectorMaker({ strategy: 'scroll' });