JQuery işlevlerini TypeScript içinde genişletme

Question

Bazı JS kodlarını TypeScript'te yeniden yazıyor ve modül içe aktarma ile ilgili sorunlarla karşılaşıyorum. Örneğin, toggleVisiblity işlevimi yazmak istiyorum. İşte kod:

/// <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(); 

Ama sorun bilinmeyen bir neden toggleVisibilityJQuery arayüzüne eklenmez için başka yöntemler (val, each vs.) görür rağmen dolayısıyla ben bir hata Property 'toggleVisibility' does not exist on type 'JQuery'. elde edilmesi.

Neden çalışmıyor?

Answer 1

ithalat/ihracat ifadeleri olmadan ayrı dosyası içinde

interface JQuery { 
    toggleVisibility(): JQuery; 
} 

koyarak deneyin. Bu benim için çalışıyor. Nedenini bilmek ilginç olsa da.

DÜZENLEME: How to extend the 'Window' typescript interface

Answer 2

bir çözümüm var, bu benim için çalıştı: $ gibi statik jQuery erişim için

Kullanım JQueryStatic arayüzü bu yazı bu davranışı için mükemmel bir açıklaması var .jGrowl (...) veya jQuery.jGrowl (...) veya senin durumunda, jQuery.toggleVisibility():

interface JQueryStatic { 

    ajaxSettings: any; 

    jGrowl(object?, f?): JQuery; 

} 

ve kendi özel yapılmış fonksiyonlar için

sen u kullanmak sing jQuery.fn.extend, JQuery arabirimini kullanın:

interface JQuery { 

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

    enable(): JQuery; 

    disable(): JQuery; 

    check(): JQuery; 

    select_custom(): JQuery; 

} 

İsteğe bağlı, burada genişletilmiş JQuery işlevler şunlardır:

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; 
      } 
     }); 
    } 
});