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

Question

我们目前正在考虑将我们的JavaScript项目转换为TypeScript.我们的应用程序在很大程度上依赖于自定义开发的jQuery UI小部件.

在我们当前的代码库中,我们使用深度复制机制来继承窗口小部件定义,例如,允许我们声明泛型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());

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

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

所以我可以在TypeScript中使用以下语法:

$(selector).MyWidget(options);

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

任何帮助都非常感谢,一如既往!

Answer 1

我不确定你是否可以编写一个实现Widget接口的类,因为缺少重载的构造函数.您可以创建由Widget接口键入的变量.

标准的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);

这将以正常方式调用.

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

所以,我的答案是 - 你不能真正做你想要的,因为你正在为jQuery添加声明的接口,而不是将它们作为模块公开.你可以将用法包装在一个模块中,比如一个适用于抽象jQuery方面的适配器,而不是在你的TypeScript中使用,或者你可以从插件中调用你的类,但插件或小部件并不真正适合模块或类.