jquery-ui – 在TypeScript中定义一个自定义的jQuery UI小部件

我们目前正在将JavaScript项目翻译成TypeScript。@R_889_9616@程序严重依赖于定制开发的jQuery UI小部件。

在我们目前的代码库中，我们使用深层复制机制来继承窗口小部件定义，例如，我们可以声明一个通用的TableWidget以及定义更多特定功能的@R_618_6201@TableWidget。

因此，我想将我的小部件定义定义为TypeScript类，然后将这些类的实例绑定到jQuery。

例如

class MyWidget {
    options: WidgetOptions;
    _init(){
        // general initialization
    }
}

class MySecondWidget extends MyWidget {
    _init(){
        super._init();
        // specific initialization
    }
}

接着

$.widget("MyNameSpace.MyWidget",new MyWidget());
$.widget("MyNameSpace.MySeWidget",new MyWidget());

此外，我想将我的自定义小部件表示为jQuery UI的Widget定义的实现

class MyWidget implements Widget {
    options: WidgetOptions;
    _init(){
        // general initialization
    }
}

@R_200_9447@在TypeScript中使用以下语法：

$(SELEctor).MyWidget(options);

我知道我必须使用定义文件(从DefinitelyTyped)，但是我还没有找到一个可靠的来源解释我如何在TypeScript中编写自定义的jQuery UI小部件。有没有人有这方面的经验？

任何帮助非常感谢，一如既往！

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

interface JQuery {
    plugin(): JQuery;
    plugin(setTings: Object): JQuery;
}

(function ($) {

    function DoSomething(someParamater: String) : void {

    }

    $.fn.plugin = function (setTings) {

        var config = {
            setTingA: "Example",setTingB: 5
        };

        if (setTings) {
            $.extend(config,setTings);
        }

        return this.each(function () {

        });
    };

})(jQuery);

$('#id').plugin();