typescript 如何在打字稿中定义 jQuery 对象？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13107208/
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 can I define a jQuery object in typescript?
提问by
I have the following code:
我有以下代码：
var modal = {
content: '',
form: '',
$form: '',
$message: '',
$modal: '',
$submits: '',
href: ''
}
$.modal = function (options) {
var settings = $.extend({}, $.modal.defaults, options),
root = getModalDiv(),
function getModalDiv() {
var modal = $('#modal');
return modal;
};
})(jQuery);
modal.$modal = $.modal({
title: link.title,
closeButton: true,
content: modal.content,
onClose: onModalClose,
minWidth: 315,
maxHeight: false,
width: false,
resizeOnLoad: true
});
modal.$form = modal.$modal.find('.form');
I am getting an error pointing to .find and saying:
我收到一个指向 .find 的错误并说：
The property find does not exist on the variable of type 'string'. I understand what the error is saying but how can I define $modalto be a variable that I can use .findon ?
“字符串”类型的变量上不存在属性 find。我明白错误在说什么，但我如何定义$modal一个可以使用的变量.find？
Also now I am in the typescript world is there a better way for me to define modal than here where I define it as a var ?
另外，现在我在打字稿世界中，有没有比这里我将其定义为 var 更好的方法来定义模态？
回答by nxn
The function assignment your code is making to $.modalis, I assume, incomplete -- however since you're specifically asking about defining types, I'll try and answer anyway.
$.modal我认为您的代码所做的函数分配是不完整的——但是，由于您特别询问定义类型，因此无论如何我都会尝试回答。
So, first thing, if you have not already: get jquery.d.ts from codeplexand reference it in your code as done below. It will provide you with type declarations for jQuery, which are very helpful when working with the library. It will also allow you to define members which are supposed to be jQuery objects.
所以，首先，如果您还没有：从 codeplex获取 jquery.d.ts并在您的代码中引用它，如下所示。它将为您提供 jQuery 的类型声明，这在使用库时非常有用。它还允许您定义应该是 jQuery 对象的成员。
///<reference path="jquery.d.ts" />
As an example, take a look at IModalwhich is an interface with 4 jQuery members (I took some guesses with what types you wanted to use on the other members -- they may not be what you want):
举个例子，看看IModal哪个接口有 4 个 jQuery 成员（我猜测了你想在其他成员上使用什么类型——它们可能不是你想要的）：
interface IModal {
content : string;
form : HTMLFormElement;
$form : JQuery;
$message: JQuery;
$modal : JQuery;
$submits: JQuery;
href : string;
}
The second interface declaration, JQueryStatic, simply declares another static member which will be accessible on the $object (see footnote) because $implements JQueryStaticin the jquery.d.ts file.
第二个接口声明，JQueryStatic，只是声明了另一个可以在$对象上访问的静态成员（见脚注），因为在 jquery.d.ts 文件中$实现JQueryStatic了。
interface JQueryStatic {
modal : any;
};
With this in place you can now create your modal object with explicit type information which is provided by the IModalinterface that it implements:
有了这个，您现在可以使用由IModal它实现的接口提供的显式类型信息创建模态对象：
var modal : IModal = {
content : '',
form : null,
$form : null,
$message: null,
$modal : null,
$submits: null,
href : ''
}
And you can assign your function to $.modal on account of the JQueryStaticadd on:
您可以将您的功能分配给 $.modal 由于JQueryStatic添加：
$.modal = function (options) {
var settings = $.extend({}, $.modal.defaults, options),
root = getModalDiv(),
getModalDiv = function() {
var modal = $('#modal');
return modal;
};
...
})(jQuery);
With that in place, and if you correct that assignment, the following line should now be OK:
有了这个，如果你更正了这个分配，下面的行现在应该没问题：
modal.$form = modal.$modal.find('.form');
Note: my experiences with adding members to existing interfaces has been iffy at best -- frequently the compiler doesn't pick them up for whatever reason. I find this to be more likely as your code base grows so it's hard to isolate the exact cause. Just something to keep an eye on.
注意：我将成员添加到现有接口的经验充其量是不确定的 - 编译器通常不会出于任何原因选择它们。我发现随着代码库的增长，这种情况更有可能发生，因此很难找出确切原因。只是有什么需要注意的。
