TypeScriptでJQuery関数を拡張する方法

Question

TypeScriptでJSコードを書き直して、モジュールのインポートに問題が発生しました。たとえば、私は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(); 

は、しかし、問題は、それは他の方法（val、eachなど）を見ているが、このように私は、エラーProperty 'toggleVisibility' does not exist on type 'JQuery'.を取得し、未知の理由toggleVisibilityためJQueryインターフェイスに追加されていないということです。

なぜ機能しないのですか？

Answer 1

インポート/エクスポート文なしで別々のファイルの中

interface JQuery { 
    toggleVisibility(): JQuery; 
} 

を入れてみてください。 これは私のために働く。理由を知ることは面白いです。

EDIT： How to extend the 'Window' typescript interface

Answer 2

私は解決策を持って、これは私の仕事：$のような静的なjQueryのアクセスのための

使用JQueryStaticインターフェースこの記事では、この動作のための優れた説明があります.jGrowl（...）またはjQuery.jGrowl（...）、またはあなたのケースでは、jQuery.toggleVisibility（）：

interface JQueryStatic { 

    ajaxSettings: any; 

    jGrowl(object?, f?): JQuery; 

} 

そして、あなたはUを使用し、独自のカスタムメイドの機能についてjQuery.fn.extendを歌う、jQueryのインターフェイスを使用します、ここに私の拡張jQueryの機能

interface JQuery { 

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

    enable(): JQuery; 

    disable(): JQuery; 

    check(): JQuery; 

    select_custom(): 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; 
      } 
     }); 
    } 
});