Как расширить функции JQuery в TypeScript

Question

Я переписываю некоторый код JS на TypeScript и сталкиваюсь с проблемами с импортом модуля. Например, я хочу написать свою функцию toggleVisiblity. Вот код:

/// <reference path="../../typings/jquery/jquery.d.ts" /> 

import * as $ from "jquery"; 

interface JQuery { 
    toggleVisibility(): JQuery; 
} 

$.fn.extend({ 
    toggleVisibility: function() { 
     return this.each(function() { 
      const $this = $(this); 
      const visibility = $this.css('visibility') === 'hidden' ? 'visible' : 'hidden'; 
      $this.css('visibility', visibility); 
     }); 
    } 
}); 

const jQuery = $('foo'); 
const value = jQuery.val(); 
jQuery.toggleVisibility(); 

Но проблема в том, что по неизвестной причине toggleVisibility не добавляется JQuery интерфейса, таким образом, я получаю ошибку Property 'toggleVisibility' does not exist on type 'JQuery'., хотя он видит другие методы (val, each и так далее).

Почему это не работает?

Answer 1

Попробуйте поставить

interface JQuery { 
    toggleVisibility(): JQuery; 
} 

Внутри отдельный файл без импорта/экспорта отчетности. Это работает для меня. Хотя интересно узнать, почему.

EDIT: Существует отличное объяснение такого поведения в этой должности: How to extend the 'Window' typescript interface

Answer 2

Я получил решение, это работает для меня:

Используйте интерфейс JQueryStatic для статического доступа JQuery как $ .jGrowl (...) или jQuery.jGrowl (...) или в случае, jQuery.toggleVisibility():

interface JQueryStatic { 

    ajaxSettings: any; 

    jGrowl(object?, f?): JQuery; 

} 

И для ваших собственных изготовленных на заказ функций, которые вы используете U Sing jQuery.fn.extend, используйте интерфейс JQuery:

interface JQuery { 

    fileinput(object?): void;//custom jquery plugin, had no typings 

    enable(): JQuery; 

    disable(): JQuery; 

    check(): JQuery; 

    select_custom(): JQuery; 

} 

Дополнительно, вот мои расширенные функции JQuery:

jQuery.fn.extend({ 
    disable: function() { 
     return this.each(function() { 
      this.disabled = true; 
     }); 
    }, 
    enable: function() { 
     return this.each(function() { 
      this.disabled = false; 
     }); 
    }, 
    check: function (checked) { 
     if (checked) { 
      $(this).parent().addClass('checked'); 
     } else { 
      $(this).parent().removeClass('checked'); 
     } 
     return this.prop('checked', checked); 
    }, 
    select_custom: function (value) { 
     $(this).find('.dropdown-menu li').each(function() { 
      if ($(this).attr('value') == value) { 
       $(this).click(); 
       return; 
      } 
     }); 
    } 
});