在Angular2应用程序中使用element-resize-detector库

Question

我试图在Angular2应用程序中使用元素调整大小检测器库(https://github.com/wnr/element-resize-detector).

根据我有限的JS模块知识,该库似乎采用CommonJS格式.经过多次尝试,我创建了以下定义文件(*.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;

然后我在我的TypeScript代码中使用以下import语句:

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

运行我的应用程序并使用时console.log('ResizeDetector', ResizeDetector),将记录以下输出:

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.…

这告诉我库已成功加载并且它按预期返回一个函数.

我的问题是我现在如何开始在TypeScript中使用库？当我尝试这样的事情:

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

我得到以下转换错误:

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

Answer 1

基于@ stone-shi答案,这是我如何工作:

定义文件:

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文件

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

    let _elementResizeDetector = elementResizeDetectorMaker({
      strategy: 'scroll'
    });