2013-10-25 17 views
11

アプリケーションでjqueryカスタムプラグインを使用する必要があり、typescriptを使用してカスタムjqueryプラグインを作成するにはどうすればよいですか。私は多くのことをGoogleで検索していると私はちょうど下のだ、私はできません上記のリンクは、プレーンなJavaScriptコードを使用していますがjavascriptのコードはtypescriptですに動作しますが、これで問題があるtypescriptを使用してカスタムjqueryプラグインを作成するにはどうすればよいですか?

http://typescript.codeplex.com/discussions/398401

Define a custom jQuery UI widget in TypeScript

リンクこのプラグインでtypescriptクラスを使用してください。 jqueryプラグインでtypescriptクラスを使用する方法はありますか?それ以外の場合は、typescriptでjqueryプラグインを作成する方法はありません。

ご了承ください。

+0

TypescriptはJavascriptを作成します。それで、あなたは何と苦労していますか? http://learn.jquery.com/plugins/basic-plugin-creation/ – WiredPrairie

+0

@ WiredPrairie、私は知っていますが、私はプラグインに変換する必要があるtypescriptウィジェットを持っています。 typescriptカスタムウィジェットをtypescriptカスタムプラグインに変更する方法はありますか? – karthik

+0

「カスタムウィジェット」とは何ですか? jQuery Pluginのオーサリング手法を使用する必要があります。 – WiredPrairie

答えて

7

プラグインの作成時にJavaScriptとTypescriptを使用することにはほとんど違いがありません。 TypeScriptのjQuery定義を最初にhereから取得してプロジェクトに追加する(または、開発環境に応じてコマンドラインなどに組み込む)ことをお勧めします。

次に、プラグインを作成して、必要なクラスと既存のコードを使用してください。以下の例は、オリジナルのJavaScriptプラグインのテクニックとほとんど変わらないことを実証する以外に何もしません。

(function($) { 
    $.fn.myPlugin = function() { 
     // do something 
     return this; 
    }; 

    $.fn.myEachPlugin = function(options) { 
     var settings: any = $.extend({ 
      color: "#ffff00" 
     }, options); 

     return this.each(function() { 
      // do something ... 
     }); 
    }; 

})(jQuery); 
+0

あなたの答えは、「太い矢印」の無名関数表記法を4回使用しています。 TypeScriptが 'this'を処理する方法のために、古いスタイルの 'function(){'構造体を使用する必要があります。[TypeScriptハンドブック](http://www.typescriptlang.org/Handbook#functions -lambdas-and-39-isthis39)。 太った矢印の構文を使用すると、 'this'は**これは無名関数**の外にあったものを指します。 '{ ' $ .fn.myPlugin =関数(){ ' と ' $ .fn.myEachPlugin =機能(オプション):このケースでは、伝統的な、通常の方法を必要とする、あなたが必要とするので、 – MarkusT

関連する問題