Определите обычай jQuery виджет UI в 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());

Кроме того, я хотел бы обозначить свои таможенные виджеты как внедрения UI's jQuery Виджет определение

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

таким образом, я в состоянии использовать следующий синтаксис в TypeScript:

$(selector).MyWidget(options);

Я знаю, что должен работать с файлом определения (от DefinitelyTyped), однако я еще не нашел надежный источник, объясняющий меня, как я должен написать обычаю jQuery Виджеты UI в TypeScript. Кто-либо получил опыт с этим?

Любая помощь, значительно ценившая, как всегда!

19
nl ja de
Мне нравится ваш подход. Это, кажется, работает на меня:)
добавлено автор Benjamin, источник

2 ответы

Я не уверен, что можно написать класс, который осуществляет интерфейс Widget , из-за отсутствия перегруженных конструкторов. Вы могли создать переменную, которая напечатана интерфейсом Widget .

Стандартный плагин jQuery был бы, представляют в почти чистом JavaScript и не использовал бы модули или классы, поскольку это заканчивает тем, что было обернуто как часть jQuery, который самого не является модулем или классом.

Вот пустой названный плагин плагин , который похож на любой стандартный плагин jQuery, но вы видите, что это использует в своих интересах систему типов TypeScript и расширяет интерфейс jQuery , чтобы позволить ему быть названным.

/// 

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, или можно назвать классы из плагина, но плагин или виджет действительно не вписываются в модуль или класс.

13
добавлено
Жаль быть предъявителем плохих новостей!
добавлено автор Fenton, источник
Я боялся, что это будет ответом. Положительная сторона в интерфейсе, тем не менее, определенно собирающемся использовать это! I' ll принимают за несколько дней, возможно другое повышение мнений, но я предполагаю I' ll должны стоять перед жестокой правдой;)
добавлено автор thomaux, источник

Это могло бы помочь иметь базовый класс в машинописном тексте, из которого могут произойти другие классы виджета. Его единственная цель состоит в том, чтобы обеспечить базовый класс, семантический, таким образом, можно получить доступ к основе class'es участники, не имея необходимость обращаться к слабому контролю типов.

Уловка должна удалить всех участников во времени выполнения (в конструкторе) - иначе вы сталкиваетесь с проблемами с наследованием, обеспеченным фабрикой виджета. Например, выбор метод отверг бы исходный метод виджета, который не желаем: мы просто хотим быть в состоянии назвать его (способом со статическим контролем типов).

class WidgetBase {

    public element:JQuery;

    constructor() {
       //remove all members, they are only needed at compile time.
        var myPrototype =  (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"});
4
добавлено
Привет Anzeo, можно использовать t он jQuery UI WidgetFactory, чтобы унаследовать другим виджетам. Но that' s другой пункт. Проблема, которую я решил, удалив участников в конструкторе, это имеющее метод как , выбор() в вашем базовом классе означает, что этот метод назовут вместо widget' s ' native' метод выбора. На самом деле базовый класс машинописного текста просто служит напечатанным представлением волшебства базового класса, которое WidgetFactory делает во времени выполнения - следовательно не реальный, отвергает, требуются здесь.
добавлено автор Benjamin, источник
AFAIK jQuery WidgetFactory не поддерживает наследование. I' m использование базового класса, хотя и there' s никакая проблема безотносительно использования наследования TypeScript вместе с WidgetFactory. Спасибо за ваш ответ, хотя!
добавлено автор thomaux, источник
Я просто заметил, что фабрика действительно поддерживает выбор пройти в основном определении, чтобы получить ваши новые виджеты. Просмотренный этот выбор ранее
добавлено автор thomaux, источник
Верстка сайтов HTML/CSS/JS/PHP
Верстка сайтов HTML/CSS/JS/PHP
3 439 участник(ов)

Правила группы: напишите !rules в чате. Группа Вк: vk.com/web_structure Freelancer: @web_fl Веб Дизайн: @dev_design Маркетолог: @topmarkening Автор: @M_Boroda

TypeScript — русскоговорящее сообщество
TypeScript — русскоговорящее сообщество
1 161 участник(ов)

Общаемся на темы TypeScript и статической типизации. Вопросы, идеи, новости и реальный опыт.