在TypeScript中定义自定义jQuery UI小部件 [英] Define a custom jQuery UI widget in TypeScript

问题描述

我们目前正在考虑将我们的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窗口小部件.有人有经验吗?

一如既往，任何帮助都将不胜感激！

解决方案

由于缺乏重载的构造函数，我不确定您是否可以编写实现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中的使用中抽象出来，或者可以从插件内部调用类，但是插件或窗口小部件并不真正适合模块或课.

We're currently looking at translating our JavaScript project to TypeScript. Our application relies heavily on custom developed jQuery UI widgets.

In our current code base, we're using a deep copy mechanism to inherit from widget definitions allowing us, for example, to declare a generic TableWidget as well as an OrdersTableWidget which defines more specific functions.

Therefore, I'd like to define my widget definitions as TypeScript classes and then bind an instance of these classes to jQuery.

For example

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

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

And then

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

Furthermore, I'd like to denote my custom widgets as implementations of jQuery UI's Widget definition

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

so I'm able to use the following syntax in TypeScript:

$(selector).MyWidget(options);

I know I have to work with the definition file (from DefinitelyTyped), however I have not yet found a reliable source explaining me how I should write custom jQuery UI Widgets in TypeScript. Has anyone got experience with this?

Any help greatly appreciated, as always!

解决方案

I'm not sure you can write a class that implements the Widget interface, due to the lack of overloaded constructors. You could create a variable that is typed by the Widget interface.

A standard jQuery plugin would be represent in almost pure JavaScript and wouldn't use modules or classes as it ends up being wrapped up as part of jQuery, which itself isn't a module or class.

Here is an empty plugin called plugin that looks like any standard jQuery plugin, but you can see it takes advantage of the TypeScript type system and extends the JQuery interface to allow it to be called.

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

This would be called in the normal way.

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

So really, my answer is - you can't really do what you want because you are adding to the declared interfaces for jQuery rather than exposing them as modules. You could wrap the usage in a module, like an adaptor that abstracts the jQuery aspect away from the use in your TypeScript, or you can call your classes from inside the plugin, but the plugin or widget doesn't really fit into a module or class.

这篇关于在TypeScript中定义自定义jQuery UI小部件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！