如何在TypeScript中擴展JQuery函數

我在TypeScript上重寫了一些JS代碼，並遇到模塊導入問題。例如，我想寫我的toggleVisiblity函數。這裏是代碼：如何在TypeScript中擴展JQuery函數

/// <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等）。

爲什麼它不起作用？

來源

2016-12-03 Alex Zhukovskiy

看來你的界面'JQuery'不與原來的合併。也許它應該被導入。你是如何導入jQuery的定義的？有了新的_ @ types_系統？ – Paleo

@Paleo with'tsd install jQuery --save' afair –

嘗試把

interface JQuery { 
    toggleVisibility(): JQuery; 
}

裏面一個單獨的文件，而無需導入/導出報表。這適用於我。儘管知道原因很有趣。

編輯：對於這種行爲在這個職位一個很好的解釋： How to extend the 'Window' typescript interface

來源

2016-12-04 10:08:02 mode777

我將在TS github中創建一個問題，也許它會被修復。謝謝你的回答。 –

@AlexZhukovskiy請給出問題的鏈接，我也很感興趣。 – Paleo

@Paleo https://github.com/Microsoft/TypeScript/issues/12648 –

我得到了解決，這個工作對我來說：

使用JQueryStatic界面類似$靜態jQuery的訪問.jGrowl（...）或jQuery.jGrowl（...），或在你的情況，jQuery.toggleVisibility（）：

interface JQueryStatic { 

    ajaxSettings: any; 

    jGrowl(object?, f?): JQuery; 

}

併爲自己的定製功能，您使用u星1.3中，使用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; 
      } 
     }); 
    } 
});

來源

2017-11-03 08:43:06 Displee

如何在TypeScript中擴展JQuery函數

回答

相關問題