はじめに
この記事は、
「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ファイルが別途必要
- あとは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上の単一ファイルをダウンロードできるらしいネット記事見つけたけど、そんなことなかった
- どなたか簡単な方法をご存知なら、そっと教えていただきたいです