Используйте библиотеку element-resize-detector в приложении Angular2

Я пытаюсь использовать библиотеку element-resize-detector (https://github.com/wnr/element-resize-detector) в приложении Angular2.

Судя по моим ограниченным знаниям модуля 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.…

Это показывает мне, что библиотека успешно загружена и возвращает ожидаемую функцию.

Мой вопрос: как я могу теперь начать использовать библиотеку в TypeScript? Когда я пытаюсь что-то вроде:

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

Я получаю следующую ошибку переноса:

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

javascript angular typescript2.0
person Michael McGowan    schedule 07.12.2016    source источник

Ответы (2)


arrow_upward
3
arrow_downward

element-resize-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);
})
person Stone Shi    schedule 08.12.2016
comment
Мне нужно обернуть код в declare module 'element-resize-detector' { //your code here }, чтобы он работал. - person Wawy; 01.03.2017
comment
Просто разместив это здесь, мы добавили определение типов для того же самого: npmjs. com/package/@types/element-resize-detector - person Saransh Kataria; 29.12.2017

arrow_upward
5
arrow_downward

Основываясь на ответе @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'
    });
person Wawy    schedule 01.03.2017