如何在typescript中定义jQuery对象?

时间:2012-10-28 07:50:15

标签: javascript 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并说:

“string”类型的变量上不存在属性find。我理解错误说的是什么,但如何将$modal定义为我可以使用.find的变量?

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

1 个答案:

答案 0 :(得分:7)

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

首先,如果您还没有:获取jquery.d.ts from codeplex并在代码中引用它,如下所示。它将为您提供jQuery的类型声明,这在使用库时非常有用。它还允许您定义应该是jQuery对象的成员。

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

作为一个例子,看看IModal这是一个与4个jQuery成员的接口(我猜测了你想在其他成员上使用什么类型 - 它们可能不是你想要的) :

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

第二个接口声明JQueryStatic,只是声明了另一个静态成员,可以在$对象上访问(参见脚注),因为$在jquery中实现了JQueryStatic .d.ts文件。

interface JQueryStatic {
    modal : any;
};

有了这个,您现在可以使用显式类型信息创建模态对象,该信息由它实现的IModal接口提供:

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

您可以在JQueryStatic添加时将您的功能分配给$ .modal:

$.modal = function (options) {
    var settings = $.extend({}, $.modal.defaults, options),
        root = getModalDiv(),
        getModalDiv = function() {
            var modal = $('#modal');
            return modal;
        };

    ...
})(jQuery);

有了这个,如果你更正了这个任务,现在应该可以使用以下行:

modal.$form = modal.$modal.find('.form');

注意:我将成员添加到现有接口的经验充其量只是 - 编译器通常不会出于任何原因选择它们。当你的代码库增长时,我发现这更有可能,因此很难找出确切的原因。只是值得关注的事情。