在 Angular2 应用程序中使用元素调整大小检测器库

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

这表明库已成功加载，并且 returns 是预期的功能。

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

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

我收到以下转译错误：

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

Answer 1

元素调整大小-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;

消费者

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

Answer 2

基于@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'
    });

在 Angular2 应用程序中使用元素调整大小检测器库

Use element-resize-detector library in an Angular2 application

javascript

typescript2.0

angular

元素调整大小-detector.d.ts

消费者