Jquery ui 在TypeScript中定义自定义jQuery UI小部件

我们目前正在考虑将JavaScript项目转换为TypeScript。我们的应用程序严重依赖于定制开发的jQueryUI小部件

在我们当前的代码库中，我们使用深度复制机制来继承小部件定义，例如，允许我们声明一个通用的

TableWidget

以及一个定义了更多特定函数的

OrdersTableWidget

因此，我想将我的小部件定义定义为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());

此外，我想将我的自定义小部件表示为jQueryUI的

小部件

定义的实现

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

因此，我能够在TypeScript中使用以下语法：

$(selector).MyWidget(options);

我知道我必须使用定义文件（来自），但是我还没有找到一个可靠的来源来解释我应该如何在TypeScript中编写定制的jQueryUI小部件。有人有这方面的经验吗

---

非常感谢您一如既往的帮助

由于缺少重载构造函数，我不确定您能否编写一个实现

小部件

接口的类。您可以创建一个由

小部件

接口键入的变量

一个标准的jQuery插件将用几乎纯JavaScript表示，并且不会使用模块或类，因为它最终被包装成jQuery的一部分，而jQuery本身不是一个模块或类

这里有一个名为

plugin

的空插件，它看起来像任何标准的jQuery插件，但您可以看到它利用了TypeScript类型系统并扩展了

jQuery

接口以允许调用它

/// <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);

---

实际上，我的答案是——您不能真正做您想做的事情，因为您正在为jQuery添加声明的接口，而不是将它们作为模块公开。您可以将使用情况包装在一个模块中，比如一个适配器，它将jQuery方面从您的TypeScript中抽象出来，或者您可以从插件内部调用您的类，但是插件或小部件并不真正适合于一个模块或类。

在TypeScript中有一个基类，其他小部件类可以从中派生出来，这可能会有所帮助。 它的唯一目的是提供基类语义，这样您就可以访问基类的成员，而不必求助于弱类型

诀窍是在运行时（在构造函数中）删除所有成员——否则您将遇到小部件工厂提供的继承问题。例如，

选项

方法将覆盖小部件的原始方法，这是不需要的：我们只希望能够调用它（以静态类型的方式）

最后，您可以使用您的小部件：

$(".selector").smartWidget({smart:"you"});

---

我担心这就是答案。不过，界面上的观点很好，肯定会使用它！过几天我会接受的，也许会有其他意见，但我想我必须面对残酷的事实；）很抱歉成为坏消息的传递者！我喜欢你的方法。这似乎对我有用：）恐怕jQuery WidgetFactory不支持继承。不过，我使用的是基类，将TypeScript继承与WidgetFactory结合使用不会有任何问题。谢谢你的回答！您好，您可以使用jQuery UI WidgetFactory从其他小部件继承。但这是另一点。我通过删除构造函数中的成员解决的问题是，在基类中有一个类似

option（）

的方法意味着将调用此方法，而不是小部件的“本机”选项方法。事实上，typescript基类只是作为WidgetFactory在运行时执行的基类魔术的类型化表示——因此这里不需要真正的重写。我刚刚注意到，该工厂确实支持传入基类定义以派生新的Widget的选项。我之前看过这个选项

class WidgetBase {

    public element:JQuery;

    constructor() {
        // remove all members, they are only needed at compile time.
        var myPrototype =  (<Function>WidgetBase).prototype;
        $.each(myPrototype, (propertyName, value)=>{
           delete myPrototype[propertyName];
        });
    }

    /**
     * Calles the base implementation of a method when called from a derived method.
     * @private
     */
    public _super(arg1?:any, arg2?:any, arg3?:any, arg4?:any) {

    }

    /**
     * @private
     */
    public _superApply(arguments) {

    }

    /**
     * Gets or sets the value of the widget option associated with the specified optionName.
     */
    public option(optionName:string, value?:any):any {

    }

    // ... further methods from http://api.jqueryui.com/jQuery.widget/
}

class SmartWidget extends WidgetBase {

    constructor(){
        super();
    }

    public _create() {
        var mySmartOption = this.option('smart'); // compiles because of base class
        this.beSmart(mySmartOption);
    }

    public _setOption(key:string, value:any) {
        if (key === 'smart') {
           this.beSmart(value);
        }

        this._super(key, value); // compiles because of base class
    }

    private beSmart(smartOne:any){
        // ...
    }

}

// register
jQuery.widget("myLib.smartWidget", new SmartWidget());

// assuming you are using https://github.com/borisyankov/DefinitelyTyped
declare interface JQuery{
    smartWidget();
    smartWidget(options:any);
    smartWidget(methodName:string, param1?:any, param2?:any, param3?:any, param4?:any);
}

$(".selector").smartWidget({smart:"you"});