よくわかるTypeScriptでjQueryを使う方法

こんにちは!ちょっとちゃんとブログを書いていこうと思った僕です。 今回はTypeScriptでjQueryを使う方法をわかりやすく紹介します。

準備

TypeScriptをインストール!

% npm install -g typescript

TypeScriptでjQueryを使うにはdefinition fileというjQueryのInterfaceが記述されたjquery.d.tsが必要になるので下記からダウンロードしてください。 もちろんjQueryも必要になるのでダウンロードしましょう。

ディレクトリ構造

こんな感じのシンプルな構成でいきます。

jquery.d.ts
jquery-2.1.0.min.js
app.ts
app.js
app.html

Hello world してみよう!

HTMLとTypeScriptをこんな感じで書きます。

app.html

<!Doctype><html><head><meta charset="utf-8">
<script type="text/javascript" src="jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head><body></body></html>

app.ts

/// <reference path="jquery.d.ts" />

var $p: JQuery = $('<p class="greeting">');
$p.html('hello world');

$('body').append($p);

TypeScriptをコンパイルしよう!

% tsc app.ts

こんな感じでapp.html開いて hello world が表示されたらおkです!