2012年12月6日木曜日

TypeScript で jQuery を使う (Sublime Text 2 で jquery の補完)

TypeScript で jQuery を使うには、jQuery の型を定義したファイルが必要です。

TypeScript のコードと一緒に公開されているので、ダウンロードして作業フォルダに入れます。
jquery.d.ts

現状は // Typing for the jQuery library, version 1.7.x とあるので、1.7.x の jQuery に対応しているようです。


次に、自分の .ts ファイルの先頭に
/// <reference path="jquery.d.ts" /> を追加します。これは外部の ts ファイルを読み込むための書き方です。

で、ここで気づきました。Sublime Text 2 で jquery の補完がでません。。。

以前作ったプラグイン(Sublime Text 2 で TypeScript の補完を出すプラグイン作った")を修正しないといけない(修正すれば jquery、というか reference で指定してるファイルの補完がでる)ということにも気づきました。

ということで修正しました。
現在の tsc_completion のバージョンは v1.0.3 になってます。
Sublime Text 2 のプラグインのコードも新しくなっているので、こちらも置き換えてください。

こんな感じで補完がでます。



例えば、こういうのが
/// <reference path="jquery.d.ts" /> var questionArea : JQuery; var inputArea : JQuery; var star1 : JQuery; var star2 : JQuery; var star3 : JQuery; ... $(document).ready(function () { inputArea = $("#text_area"); inputArea.keyup(onInput); questionArea = $("#question_area"); star1 = $("#star1"); star2 = $("#star2"); star3 = $("#star3"); inputArea.focus(); // show first text showNextText(); })
こういうのに変換されます。
var questionArea; var inputArea; var star1; var star2; var star3; ... $(document).ready(function () { inputArea = $("#text_area"); inputArea.keyup(onInput); questionArea = $("#question_area"); star1 = $("#star1"); star2 = $("#star2"); star3 = $("#star3"); inputArea.focus(); showNextText(); }); クラスとか使ってないからそのままだねw


jquery で HTMLInputElement にあたる要素で focus() 呼んでもフォーカスあたらないのはなんでなんだ。。。

jquery 1.8.3 にしたら直った


0 件のコメント:

コメントを投稿