使用打字稿制作jquery ui的最佳方法

Abr*_*ves 7 jquery-ui jquery-widgets typescript

我正在制作一个jquery小部件,其中widget工具在typescript中输入.如何在不写.d.ts的情况下提供良好的智能感知?

例如:

/*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"
});
Run Code Online (Sandbox Code Playgroud)

为每个插件编写.d.ts太无聊了.还有其他选择

注意:如果我不包含mywidget.d.ts,则此代码将无法编译,我将无法进行智能感知:

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

/*编译器输出:...属性'mywidget'在'JQuery'类型的值上不存在*/

rya*_*yan 11

GitHub上的DefinitelyTyped项目为大多数流行的JavaScript库提供定义文件.

您需要做的就是下载所需的文件并在代码中引用它,如:

///<reference path="path/to/jqueryui-1.9.d.ts"/>
Run Code Online (Sandbox Code Playgroud)