टाइपस्क्रिप्ट

Question

में JQuery फ़ंक्शंस का विस्तार कैसे करें मैं टाइपस्क्रिप्ट पर कुछ जेएस कोड दोबारा लिख ​​रहा हूं और मॉड्यूल आयात के साथ समस्याओं का सामना कर रहा हूं। उदाहरण के लिए, मैं अपना 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(); 

लेकिन समस्या यह है कि के लिए अज्ञात कारण toggleVisibilityJQuery इंटरफेस में नहीं जोड़ा जाता इस प्रकार मैं एक त्रुटि Property 'toggleVisibility' does not exist on type 'JQuery'., हालांकि यह अन्य विधियों (val, each और इसी तरह) देखता हो रही है।

यह क्यों काम नहीं कर रहा है?

Answer 1

आयात/निर्यात बयानों के बिना एक अलग फ़ाइल के अंदर

interface JQuery { 
    toggleVisibility(): JQuery; 
} 

डालने की कोशिश करो। यह मेरे लिए काम करता है। हालांकि यह जानना दिलचस्प क्यों था कि क्यों।

संपादित: How to extend the 'Window' typescript interface

Answer 2

मैं समाधान हो गया है, यह मेरे लिए काम किया: $ की तरह स्थिर jQuery पहुँच के लिए

उपयोग JQueryStatic इंटरफ़ेस इस पोस्ट में इस व्यवहार के लिए एक उत्कृष्ट स्पष्टीकरण नहीं है .jGrowl (...) या jQuery.jGrowl (...) या अपने मामले में, jQuery.toggleVisibility():

interface JQueryStatic { 

    ajaxSettings: any; 

    jGrowl(object?, f?): JQuery; 

} 

और अपने स्वयं के कस्टम बनाया कार्यों के लिए आप यू का उपयोग गाओ 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; 
      } 
     }); 
    } 
});