CODEWITHSUNDEEP
jquery-uitypescriptjquery-widgets
Abraão Alves
Abraão Alves

Reputation: 803

Best way to make jquery ui with typescript

I'm making a jquery widget with widget factory typed in typescript. How to provide a good intellisense without having to write .d.ts ?

ex:

/*mywidget.ts*/

$.widget("ui.mywidget", {
    options: {
        myoption: ""
    },
    doSomething: function () {
        this._hasDoSomething = true;
        /*do doSomething*/
    },
    hasDoSomething: function (): bool {
        return <bool>this._hasDoSomething;
    }
});

/*mywidget.d.ts*/
interface MyWidgetOptions {
    myoption: string;
}

interface MyWidget extends Widget, MyWidgetOptions {}

interface NLIB { 
    mywidget: MyWidget;
}

interface JQuery {
    mywidget(): JQuery;
    mywidget(methodName: string): JQuery;
    mywidget(options: MyWidgetOptions): JQuery;
    mywidget(optionLiteral: string, optionName: string): any;
    mywidget(optionLiteral: string, options: MyWidgetOptions): any;
    mywidget(optionLiteral: string, optionName: string, optionValue: any): JQuery;
}

interface JQueryStatic {
    nlib: NLIB;
}


/// <reference path="teste.d.ts" />
$(".teste").mywidget({
    myoption: "asdadds"
});

Too boring to write .d.ts for each plugin. Any alternative ?

note: If I don't include a mywidget.d.ts this code will no compile and I will not have intellisense:

///<reference path="path/to/jqueryui-1.9.d.ts"/>
$(".teste").mywidget({ 
    myoption: "asdadds"
});

/* compiler out: ... the property 'mywidget' does not exist on value of type 'JQuery' */

Upvotes: 7

Views: 10125

Answers (2)

Benjamin
Benjamin

Reputation: 1173

If you do not want a .d.ts file, just use the declare keyword before your interface. For an example, see my answer at https://stackoverflow.com/a/16967239/1859442

Upvotes: 0

ryan
ryan

Reputation: 6655

The DefinitelyTyped project on GitHub provides definition files for most of the popular JavaScript libraries.

All you need to do is download the file you need and reference it in your code like:

///<reference path="path/to/jqueryui-1.9.d.ts"/>

Upvotes: 11

Related Questions