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

Question

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

在我们当前的代码库中，我们使用深度复制机制来继承小部件定义，例如，允许我们声明一个通用的 TableWidget 以及一个 OrdersTableWidget，它定义了更具体的功能。

因此，我想将我的小部件定义定义为 TypeScript 类，然后将这些类的实例绑定(bind)到 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 小部件。有没有人有这方面的经验？

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

Answer 1

由于缺少重载的构造函数，我不确定您是否可以编写实现 Widget 接口(interface)的类。您可以创建一个由 Widget 接口(interface)键入的变量。

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

这是一个名为 plugin 的空插件，它看起来像任何标准的 jQuery 插件，但您可以看到它利用了 TypeScript 类型系统并将 JQuery 接口(interface)扩展到允许它被调用。

/// <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 添加声明的接口(interface)，而不是将它们作为模块公开。您可以将用法包装在一个模块中，例如将 jQuery 方面从 TypeScript 中的使用抽象出来的适配器，或者您可以从插件内部调用您的类，但插件或小部件并不真正适合模块或类。