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

TypeScriptでもjQuery使いたい

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

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

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

jquery.d.tsを入手する方法

• Node.jsをインストールする（すでに持ってる人はスキップ）
  • 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の環境を構築する
• あとはjQueryと各方面の先人たちに感謝しながらAtomで.tsファイルを書く

\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
• AtomでTypeScriptの環境を構築する
• TypeScriptでJQueryを扱う方法
• Node.js / npmをインストールする（for Windows）
• TypeScriptの型定義管理ツールTypingsについて
• TypeScriptのtsdがオワコンになったのでtypingsを使ってみた | Black Everyday Company