19

現在、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());

Widgetさらに、カスタム ウィジェットを jQuery UI の定義の実装として示したいと思います

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

そのため、TypeScript で次の構文を使用できます。

$(selector).MyWidget(options);

私は定義ファイルを操作しなければならないことを知っていますが ( DefiniteTypedから)、TypeScript でカスタム jQuery UI ウィジェットを作成する方法を説明する信頼できるソースをまだ見つけていません。誰もこれを経験したことがありますか？

いつものように、どんな助けも大歓迎です！

4

2 に答える 2

14

Widgetオーバーロードされたコンストラクターがないため、インターフェイスを実装するクラスを作成できるかどうかはわかりません。インターフェイスによって型指定される変数を作成できWidgetます。

標準の jQuery プラグインは、ほぼ純粋な JavaScript で表現され、それ自体がモジュールやクラスではない 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 の宣言されたインターフェイスに追加しているため、本当にやりたいことができないということです。TypeScript での使用から jQuery の側面を抽象化するアダプターのように、使用法をモジュールでラップするか、プラグイン内からクラスを呼び出すことができますが、プラグインまたはウィジェットは実際にはモジュールに適合しません。クラス。

于 2013-01-29T09:51:00.870 に答える
4

他のウィジェット クラスの派生元となる typescript の基本クラスを用意すると役立つ場合があります。その唯一の目的は、基本クラスのセマンティックを提供して、弱い型付けに頼ることなく基本クラスのメンバーにアクセスできるようにすることです。

秘訣は、実行時に (コンストラクターで) すべてのメンバーを削除することです。そうしないと、ウィジェット ファクトリによって提供される継承で問題が発生します。たとえば、optionメソッドは望ましくないウィジェットの元のメソッドをオーバーライドします。(静的に型付けされた方法で) それを呼び出せるようにしたいだけです。

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"});
于 2013-06-06T16:22:05.720 に答える