付録

TypeScript で jQuery を使う

jQuery のような既存の JavaScript ライブラリを TypeScript で利用するためには、そのライブラリの型情報が記述された宣言ソースファイルを用意する必要があります。 jQuery の宣言ソースファイル jquery.d.ts は以下の URL からダウンロードします。

https://github.com/borisyankov/DefinitelyTyped/tree/master/jquery

ダウンロードした宣言ソースファイルは、/// <reference path="宣言ソースファイルパス" /> 形式のコメントで参照します。以下に示すのは、TypeScript で jQuery を利用する例です。

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

class Greeter {
    private greeting: string;
    constructor(message: string) {
        this.greeting = message;
    }
    public greet(): string {
        return "Hello, " + this.greeting;
    }
}

var greeter: Greeter = new Greeter("TypeScript");

$("div").html(greeter.greet());

今回の例では、上記ソースコードを main.ts というファイル名で保存し、以下のコマンドで JavaScript ファイルにコンパイルします。

tsc main.ts

コンパイルが成功すると JavaScript ファイル main.js が作成されているので、HTML ファイルから読み込むことができます。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>TypeScript</title>
  </head>
  <body>
    <div></div>
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="main.js"></script>
  </body>
</html>