How can I define a jQuery object in typescript?

Question

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:

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 ?

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 ?

Answer 1

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.

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" />

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;
}

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;
};

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    : ''
}

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.