TypeScriptでjQueryを使ってみる

TypeScriptの大きなメリットの一つは、既存の大量のJavaScriptの資産を活用できることですね。

ということで、TypeScriptからjavascriptの定番ライブラリのjQueryを使ってみました。
jsのライブラリを使うときには、○○.d.tsなどという形式で定義された型定義ファイルを参照することで、既存のjsライブラリを、型付けされたTypeScript側から参照できるようになります。

TypeScriptからのjQueryの使い方

ということでさっそくTypeScriptからjQueryを使えるようにしてみます。

まずは、新規プロジェクト作成のウィザードで、「TypeScriptを使用したHTMLアプリケーション」の雛形を生成しておきます。
f:id:minami_SC:20150215225613p:plain:w400

Nugetでライブラリのインストール

jQueryのインストール

Nugetパッケージの管理ダイアログを表示し、「jQuery」と入力して検索します。
そして、以下のjQueryモジュールをインストールします。
f:id:minami_SC:20150215225645p:plain:w400

jQueryの型定義ファイルのインストール

先ほどインストールした、jquery-x.x.x.jsというファイルをソリューションエクスプローラで右クリックし、「TypeScript型指定の検索」という項目をクリックします。
f:id:minami_SC:20150215225654p:plain:w300

すると、Nugetの管理ダイアログが開き、「tag:typescript + ライブラリ名」というキーワードで検索してくれます。
検索が終わると以下の画面のように、jquery.TypeScript.DefinitelyTypedというパッケージが見つかるので、これをインストールします。
f:id:minami_SC:20150215225705p:plain:w400

ライブラリの読み込み

htmlファイルでjQueryを読み込む

ライブラリを読み込みたいhtmlファイルを開いておき、ソリューションエクスプローラで、jquery-x.x.x.js(xはバージョン番号)というファイルを、エディタ上のライブラリ読み込みをしたい位置にドロップします。
f:id:minami_SC:20150215225723p:plain:w400
すると以下のように、jsファイルの読み込みタグを生成してくれます。
f:id:minami_SC:20150215230403p:plain

htmlファイルは以下のような感じです。

index.html

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>TypeScript HTML App</title>
    <link rel="stylesheet" href="app.css" type="text/css" />
    <script src="Scripts/jquery-2.1.3.min.js"></script>
    <script src="app.js"></script>
</head>
<body>
    <h1>TypeScript HTML App</h1>

    <div id="content"></div>
</body>
</html>

tsファイルで、型定義ファイルを読み込む

こちらも同じように、ソリューションエクスプローラから、tsファイルのエディタ上にドロップすると、「/// reference・・・」という、型定義を読み込むためのコメント文を挿入してくれます。
f:id:minami_SC:20150215230410p:plain

使ってみる

ライブラリのインポートが終わったら、さっそく使ってみます。
以下のように、DOMの準備ができたら、「content」というidの要素の背景色を設定する処理を書いてみました。

TypeScriptなので、ラムダ式で楽に書けるのもイイですね。

app.ts

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

$(() => {
    $('#content').html('hello');
});

SourceChord

C#とXAML好きなプログラマの備忘録。最近はWPF系の話題が中心です。