吉本集の個人ブログ
Web制作の技術について書いています。たまに日記も書きます。

【TypeScript】jQueryを使ってみる

2014年10月22日 / category : typescript

実務ではやはり、まだまだjQueryを使用する機会が多いでしょう。
ということで、TypeScriptでjQueryを使用する方法を解説してみます。

まず、次のようなHTMLを用意します。

HTML
<script src="./js/libs/jquery-1.11.0.min.js"></script>
<script src="./js/main.js"></script>

jQueryファイルを用意し、HTML側で読み込む。
次に、main.jsファイルを読み込む。
このmain.jsファイルがTypeScriptでコンパイルされるjsファイルです。

とりあえず、次のようなコードを書いてみます。

TypeScript – main.jsにコンパイル
$(function(){ //コンパイルエラー
	$('body').html('TypeScript'); //コンパイルエラー
});

当然、コンパイルエラーです。
一般的にjQueryオブジェクトとして使用している’$'が定義されていません。
HTML側では、jQueryファイルを読み込んでいますが、TypeScriptの段階では読み込めていません。
なので、jQueryを読み込みます。

TypeScriptでは、外部ファイル(tsファイル)を読み込むことができます。
次のコードを見てみます。

TypeScript – a.ts
function hello():string{
	return 'Hello';
};

hello関数を定義したa.tsファイルを用意しました。

このa.tsファイルを別のtsファイルに読み込み、hello関数を使用してみます。

TypeScript – a.ts
/// <reference path="./a.ts" />

var message:string = hello();
console.log( message );

/// <reference path=”ファイル参照先” />
この構文で外部tsファイルを読み込みます。

それではこの構文を使ってjQueryファイルを読み込みます。
但し、jQueryのtsファイルが必要です。

下記のURLより、jquery.d.tsファイルをダウンロードします。
https://github.com/borisyankov/DefinitelyTyped

それでは、jquery.d.tsファイルを読み込んで使用してみます。

TypeScript – a.ts
/// <reference path="./d.ts/DefinitelyTyped/jquery.d.ts" />

$(function(){
	$('body').html('TypeScript');
});

これでjQueryを使用することができます。