Best way to make jquery ui with typescript

Question

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' */

I believe I share the motivation for this question. I love typescript, but I wish it had a good answer for a typescript-"native" DOM manipulation library that could be extended to build out typescript-native UI widgets (like auto-complete). I understand why the JQuery UI Widget Factory (which I also loved, pre-typescript) is a bad match here, but what more typescripty solution is possible instead? — Jason Kleban
– Jason Kleban, Commented Nov 6, 2013 at 16:53

thomaux · Accepted Answer · 2012-12-21 09:10:45Z

11

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

edited Dec 21, 2012 at 9:10

thomaux

19.8k10 gold badges83 silver badges107 bronze badges

answered Dec 21, 2012 at 7:32

ryan

6,6856 gold badges45 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Abraão Alves Over a year ago

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' */

azulBonnet Over a year ago

So your viewModel would just have something like this ///<reference path="../../../node_modules/@types/jqueryui/index.d.ts"/> import * as $ from "jquery"?

Community · Accepted Answer · 2017-05-23 11:48:29Z

0

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

edited May 23, 2017 at 11:48

CommunityBot

11 silver badge

answered Jun 7, 2013 at 9:16

Benjamin

1,1737 silver badges19 bronze badges

Collectives™ on Stack Overflow

Best way to make jquery ui with typescript

2 Answers 2

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Linked

Related