TypeScriptでJQueryを扱う方法

More than 3 years have passed since last update.

TypeScriptは静的型付け言語です。TypeScriptを扱ったプログラミングの中でJQueryの型やjqueryの関数を使用したくなると思います。しかし、標準のTypeScirptではJQuery型は対応しておりません。


対応方法

型定義ファイルを使用してJQuery型を使えるようにします。

まず型定義ファイルをダウンロードします。

DefinitelyTypedからjqueryを型定義ファイルをダウンロード

https://github.com/borisyankov/DefinitelyTyped

様々なライブラリの型定義ファイルがありますがjqueryというフォルダーをダウンロードしてください。

ダウンロードしたフォルダーの中のjquery.d.tsというファイルを任意のディレクトリに移動してください。

今度はTypeScriptのコードの方で一番最初の行に型定義ファイルを宣言します。

(pathはjquery.d.tsが存在しているディレクトリ)


main.ts

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


これだけで動きます。


main.ts

var jquery :JQuery = $("#id");

function hoge(jquery :JQuery){
}


このようにJQuery型や$が使用できます。


注意

これはあくまでコンパイルを通るようしただけなので、実際にはhtmlにjqueryのライブラリを読み込む記述をしないと動きません。