如何在 TypeScript 中扩展 JQuery 函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/40948294/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to extend JQuery functions in TypeScript
提问by Alex Zhukovskiy
I'm rewriting some JS code on TypeScript and encounter with problems with module import. For example, I want to write my toggleVisiblityfunction. Here is code:
我在 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();
But the problem is that for unknown reason toggleVisibilityis not added to JQueryinterface thus I get an error Property 'toggleVisibility' does not exist on type 'JQuery'., although it sees other methods (val, eachand so on).
但问题是，由于未知原因，toggleVisibility不添加到JQuery界面就我得到一个错误Property 'toggleVisibility' does not exist on type 'JQuery'.，但它看到其他的方法（val，each等）。
Why is it not working?
为什么它不起作用？
回答by mode777
Try putting the
尝试将
interface JQuery {
toggleVisibility(): JQuery;
}
Inside a seperate file without import/export statements. This works for me. Though it wold be interesting to know why.
在没有导入/导出语句的单独文件中。这对我有用。虽然知道为什么会很有趣。
EDIT: There is an excellent explanation for this behaviour in this answer to post: How to extend the 'Window' typescript interface
编辑：在这个帖子的答案中对这种行为有一个很好的解释： 如何扩展“窗口”打字稿界面
回答by Displee
I got the solution, this worked for me:
我得到了解决方案，这对我有用：
Use the JQueryStatic interface for static jQuery access like $.jGrowl(...) or jQuery.jGrowl(...) or in your case, jQuery.toggleVisibility():
使用 JQueryStatic 接口进行静态 jQuery 访问，如 $.jGrowl(...) 或 jQuery.jGrowl(...) 或在您的情况下，jQuery.toggleVisibility()：
interface JQueryStatic {
ajaxSettings: any;
jGrowl(object?, f?): JQuery;
}
And for your own custom made functions you use using jQuery.fn.extend, use the JQuery interface:
对于您使用 jQuery.fn.extend 使用的自定义函数，请使用 JQuery 接口：
interface JQuery {
fileinput(object?): void;//custom jquery plugin, had no typings
enable(): JQuery;
disable(): JQuery;
check(): JQuery;
select_custom(): JQuery;
}
Optional, here are my extended JQuery functions:
可选，这是我的扩展 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;
}
});
}
});
