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 ファイルの先頭に

view plainprint?

1. /// <reference path="jquery.d.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 のプラグインのコードも新しくなっているので、こちらも置き換えてください。

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

例えば、こういうのが

view plainprint?

1. /// <reference path="jquery.d.ts" />  
2. var questionArea : JQuery;  
3. var inputArea : JQuery;  
4.   
5. var star1 : JQuery;  
6. var star2 : JQuery;  
7. var star3 : JQuery;  
8.   
9. ...  
10.   
11. $(document).ready(function () {  
12.  inputArea = $("#text_area");  
13.  inputArea.keyup(onInput);  
14.   
15.  questionArea = $("#question_area");  
16.   
17.  star1 = $("#star1");  
18.  star2 = $("#star2");  
19.  star3 = $("#star3");  
20.   
21.  inputArea.focus();  
22.   
23.  // show first text  
24.  showNextText();  
25. })  

/// <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(); })
こういうのに変換されます。

view plainprint?

1. var questionArea;  
2. var inputArea;  
3. var star1;  
4. var star2;  
5. var star3;  
6.   
7. ...  
8. $(document).ready(function () {  
9.     inputArea = $("#text_area");  
10.     inputArea.keyup(onInput);  
11.     questionArea = $("#question_area");  
12.     star1 = $("#star1");  
13.     star2 = $("#star2");  
14.     star3 = $("#star3");  
15.     inputArea.focus();  
16.     showNextText();  
17. });  

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 にしたら直った