TypeScriptのなかでjQuery使いたい（Windows、Atom）

## はじめに
この記事は、
「Windows10でAtom（atom-typescript）を使ってTypeScriptを書くときにjQuery型を利用したい」人向けに
残したメモ書きです。Windows7でも行けるかもですが、未検証です。
今日TypeScript触り始めた初心者なので技術的な内容は薄いです。

## TypeScriptの概要とか
TypeScriptは、C#っぽい雰囲気のプログラミング言語です。AltJS（JavaScript代替言語）の一種らしいです。
TypeScriptコンパイラによって、TypeScript（.tsファイル）からJavaScript（.jsファイル）を生成することができます。
型による制約を埋め込まずにほぼ純粋なJavaScriptとしても書けますが、
変数に型の指定することで、事前に型による制約の恩恵を受けられます。

TypeScriptの概要やAtomを使った開発環境構築については、下記サイトが参考になります。
[プロ生ちゃんと学ぶ！ TypeScript入門 - Build Insider](http://www.buildinsider.net/web/pronamatypescript)

## TypeScriptでもjQuery使いたい
TypeScriptのなかでjQueryをはじめとするライブラリを利用する場合、
型定義ファイルを入手する必要があります（あるいは自作する）。
メジャーどころのライブラリは、たいてい公開されている、とのこと。

ということで、
[https://github.com/borisyankov/DefinitelyTyped](https://github.com/borisyankov/DefinitelyTyped)
に行き、tボタンを押下→jquery/jquery.d.tsを検索して発見！
でも、どうやってダウンロードするの……。
私は全量git cloneして、目的のファイルをエクスプローラ上から摘みました。

今後「jquery-ui使いたい」とか欲望が生じるたびに型定義を探し回るのかと疑問に思い、
TypeScript型定義ファイルの取得方法を調べました。

## jquery.d.tsを入手する方法
+ Node.jsをインストールする（すでに持ってる人はスキップ）
  + [http://nodejs.org/](http://nodejs.org/)からインストーラーをダウンロード
  + インストーラーに頼る
  + 以下のコマンドでインストールできてるか確認  
  `node --version`  
  `npm --version`  
+ npmコマンドを使ってtypingsをインストールする  
  `npm install typings --global`
+ インストールが終わったら一旦Windowsを再起動する（調子が悪かったので）
  + コマンドプロンプト立ち上げ直しても、コマンドが通ったり通らなかったり
+ 適当な作業フォルダを作る
  + 例：`D:\myTsPrj`
+ 作業フォルダ内で、typingsのプロジェクト初期化`typings init`
  + 結果：正常終了なら何も表示されない  
  + typings.jsonファイルが生成される

``` typingsの初期化.log
D:\myTsPrj>typings init
```

+ jqueryがあるか探す
  + `typings search jquery --ambient`
  + 結果：いっぱい表示された  

``` typinsSearch.log
D:\myTsPrj>typings search jquery --ambient
Viewing 20 of 112

NAME                 SOURCE HOMEPAGE                                                DESCRIPTION VERSIONS UPDATED
chai-jquery          dt     https://github.com/chaijs/chai-jquery                               1        2016-07-24T06:33:59.000Z
jasmine-jquery       dt     https://github.com/velesin/jasmine-jquery                           1        2016-03-17T12:06:54.000Z
jquery               dt     http://jquery.com/                                                  1        2016-09-29T16:29:22.000Z
jquery-ajax-chain    dt     https://github.com/humana-fragilitas/jQuery-Ajax-Chain/             1        2016-03-17T12:06:54.000Z
jquery-alertable     dt     https://github.com/claviska/jquery-alertable                        1        2016-10-03T17:20:58.000Z
jquery-backstretch   dt     https://github.com/srobbin/jquery-backstretch                       1        2016-04-23T07:37:25.000Z
jquery-cropbox       dt     https://github.com/acornejo/jquery-cropbox                          1        2016-03-17T12:06:54.000Z
jquery-easy-loading  dt     http://carlosbonetti.github.io/jquery-loading/                      1        2016-03-16T17:18:10.000Z
jquery-fullscreen    dt     https://github.com/kayahr/jquery-fullscreen-plugin                  1        2016-03-16T15:55:26.000Z
jquery-galleria      dt     https://github.com/aino/galleria                                    1        2016-03-17T12:06:54.000Z
jquery-handsontable  dt     http://handsontable.com                                             1        2016-11-08T14:36:32.000Z
jquery-jsonrpcclient dt     https://github.com/Textalk/jquery.jsonrpcclient.js                  1        2016-03-16T15:55:26.000Z
jquery-knob          dt     http://anthonyterrien.com/knob/                                     1        2016-03-17T12:06:54.000Z
jquery-mockjax       dt     https://github.com/jakerella/jquery-mockjax                         1        2016-09-06T22:41:35.000Z
jquery-mousewheel    dt     https://github.com/jquery/jquery-mousewheel                         1        2016-05-01T12:59:06.000Z
jquery-paging        global                                                                     1        2016-05-08T20:10:23.000Z
jquery-sortable      dt     http://johnny.github.io/jquery-sortable/                            1        2016-03-17T12:06:54.000Z
jquery-steps         dt     http://www.jquery-steps.com/                                        1        2016-11-24T06:16:12.000Z
jquery-timeentry     dt     https://github.com/kbwood/timeentry                                 1        2016-03-16T15:55:26.000Z
jquery-truncate-html dt     https://github.com/kbwood/timeentry                                 1        2016-03-05T14:26:59.000Z
```


+ 参考：エラーになったコマンド：`typings install jquery --save --global`

``` エラーの例.log
D:\myTsPrj>typings install jquery --save --global
typings ERR! message Unable to find "jquery" ("npm") in the registry.
typings ERR! message However, we found "jquery" for 1 other source: "dt"
typings ERR! message You can install these using the "source" option.
typings ERR! message We could use your help adding these typings to the registry: https://github.com/typings/registry
typings ERR! caused by https://api.typings.org/entries/npm/jquery/versions/latest responded with 404, expected it to equal 200
typings ERR!
typings ERR! cwd D:\myTsPrj
typings ERR! system Windows_NT 10.0.14393
typings ERR! command "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\xxxxx\\AppData\\Roaming\\npm\\node_modules\\typings\\dist\\bin.js" "install" "jquery" "--save" "--global"
typings ERR! node -v v6.9.1
typings ERR! typings -v 2.0.0
typings ERR!
typings ERR! If you need help, you may report this error at:
typings ERR!   <https://github.com/typings/typings/issues>
```
+ jQueryの型定義ファイルをインストールする
  + 作業フォルダで`typings install dt~jquery --save --global`

``` 
D:\myTsPrj>typings install dt~jquery --save --global
jquery
`-- (No dependencies)

D:\myTsPrj>tree /f
フォルダー パスの一覧:  ボリューム データ
ボリューム シリアル番号は 0000007D 1297:1F43 です
D:.
│  typings.json
│
└─typings
    │  index.d.ts
    │
    └─globals
        └─jquery
                index.d.ts
                typings.json
```

+ 上記の結果、作業フォルダ内に、typings\globals\jquery\index.d.tsというファイルができる
  + これを.tsファイルからの相対パスで参照する
+ Atomでコンパイルまでするつもりなら、tsconfig.jsonファイルが別途必要
  + （参考）[AtomでTypeScriptの環境を構築する](http://qiita.com/Sugima/items/113eb16f14ca1e9a6d0f)
+ あとはjQueryと各方面の先人たちに感謝しながらAtomで.tsファイルを書く

``` D:\myTsPrj\test.ts
/// <reference path="typings/globals/jquery/index.d.ts" />

// 画面描画例
function writeToScreen(message:string) {
    var jq:JQuery = $("#debug");
    jq.append(message + '<br>');
}
```

## まとめ
+ TypeScriptのなかでjQueryを使えるようにしました
  + 開発環境はWindwos10＆Atom（atom-typescript）
  + TypeScript型定義管理ツール「typings」を利用してjquery.d.tsを入手しました
  + .tsファイルの先頭に、ローカルに置いた型定義ファイルの参照記述が必要でした 
      + 例→`/// <reference path="lib/jquery/jquery.d.ts" />`
+ できればgithubから1ファイル（jquery.d.ts）だけ欲しかったです
  + githubからmasterブランチcloneすると数百 MBになって(´・ω・`)
  + svn exportでgithub上の単一ファイルをダウンロードできるらしいネット記事見つけたけど、そんなことなかった
      + どなたか簡単な方法をご存知なら、そっと教えていただきたいです

## 参考になったサイトとか記事とか
+ [プロ生ちゃんと学ぶ！ TypeScript入門 - Build Insider](http://www.buildinsider.net/web/pronamatypescript)
+ [AtomでTypeScriptの環境を構築する](http://qiita.com/Sugima/items/113eb16f14ca1e9a6d0f)
+ [TypeScriptでJQueryを扱う方法](http://qiita.com/ryo-ma/items/fe3df3135082f544ce48)
+ [Node.js / npmをインストールする（for Windows）](http://qiita.com/taipon_rock/items/9001ae194571feb63a5e)
+ [TypeScriptの型定義管理ツールTypingsについて](http://qiita.com/literalice/items/d83249a5646abcb0bec6)
+ [TypeScriptのtsdがオワコンになったのでtypingsを使ってみた |  Black Everyday Company](http://kuroeveryday.blogspot.jp/2016/02/typescript-typings.html)