如何在typescript中定义jQuery对象？ [英] How can I define a jQuery object in typescript?

问题描述

我有以下代码：

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

我收到错误，指向.find并说：

I am getting an error pointing to .find and saying:

string类型的变量上不存在属性find。我理解错误是什么，但我如何定义 $ modal 作为我可以使用的变量 .find on？

The property find does not exist on the variable of type 'string'. I understand what the error is saying but how can I define $modal to be a variable that I can use .find on ?

现在我在打字稿世界中有更好的方法来定义模态，而不是在这里我将它定义为var？

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 ?

推荐答案

你的代码对 $ .modal 的函数赋值是，我认为是不完整的 - 但是因为你特别询问定义类型，所以无论如何我都会尝试回答。

The function assignment your code is making to $.modal is, I assume, incomplete -- however since you're specifically asking about defining types, I'll try and answer anyway.

所以，首先，如果你还没有：得到jquery。 d.ts 来自codeplex 并参考你的代码如下所示。它将为您提供jQuery的类型声明，这在使用库时非常有用。它还允许您定义应该是jQuery对象的成员。

So, first thing, if you have not already: get jquery.d.ts from codeplex and 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.

///<reference path="jquery.d.ts" />

例如，看看 IModal 这是一个与4个jQuery成员的接口（我猜测了你想在其他成员上使用什么类型 - 它们可能不是你想要的）：

As an example, take a look at IModal which 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):

interface IModal {
    content : string;
    form    : HTMLFormElement;
    $form   : JQuery;
    $message: JQuery;
    $modal  : JQuery;
    $submits: JQuery;
    href    : string;
}

第二个接口声明， JQueryStatic ，只需声明另一个静态成员，该成员可在 $ 对象上访问（参见脚注），因为 $ 实现jquery.d.ts文件中的 JQueryStatic 。

The second interface declaration, JQueryStatic, simply declares another static member which will be accessible on the $ object (see footnote) because $ implements JQueryStatic in the jquery.d.ts file.

interface JQueryStatic {
    modal : any;
};

现在，您可以创建模态对象，其中包含由<提供的显式类型信息code> IModal 它实现的接口：

With this in place you can now create your modal object with explicit type information which is provided by the IModal interface that it implements:

var modal : IModal = {
    content : '',
    form    : null,
    $form   : null,
    $message: null,
    $modal  : null,
    $submits: null,
    href    : ''
}

你可以将你的功能指定给$ .modal由于 JQueryStatic 添加：

And you can assign your function to $.modal on account of the JQueryStatic add on:

$.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.

这篇关于如何在typescript中定义jQuery对象？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！