TypeScriptでjQueryを扱う with tsd

Posted on 2015/08/19
Tags: Node.js, TypeScript, 環境

TypeScriptでjQueryを扱う with tsd

jQueryだけでなく、angular.jsなども使えます。

以下手順。

tsdのインストール

$ npm install -g tsd

tsdを使ってjQueryを型情報ファイルを(カレントディレクトリに)落としてくる

 型情報ファイルは./typingsディレクトリ以下に自動で落とされるので、ファイルが散らばるとかはありません。

$ tsd install jquery

jQuery自体を落とすのを忘れずに

$ wget http://code.jquery.com/jquery-2.1.4.min.js ( ブラウザなどで落としてきてもいい )

jQueryを使った型安全プログラミング

 まずは、なんの変哲もないhtmlファイルです。

hello.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="./jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="./hello.js"></script>
  </head>
  <body>
  </body>
</html>

 次にTypeScriptをコンパイルしてみます。
まずは、ちゃんと型エラーが出るか確認。

hello.ts

// jQueryの型情報を読み込みます
/// <reference path="./typings/jquery/jquery.d.ts"/>
$(() => { $("body").html(10); });
$ tsc hello.ts
hello.ts(2,26): error TS2345: Argument of type 'number' is not assignable to parameter of type '(index: number, oldhtml: string) => string'.

多分、別のオーバーロードと思われてますね。
コンパイル弾かれたので成功っ!

 今度は正しく動くか試してみます。

hello.ts

// jQueryの型情報を読み込みます
/// <reference path="./typings/jquery/jquery.d.ts"/>
$(() => { $("body").html("Hello, jQuery from TypeScript !!"); });
$ tsc hello.ts

 エラーが出ませんでした!
カレントディレクトリを見てみると、hello.jsというファイルができています。

できた。

ブラウザでhello.htmlを開いてみます。
Result

できた!



この記事はこちらから修正リクエストを送ることができます。
TypeScriptでjQueryを扱う with tsd - github
ゴミ箱ボタンの左にある、鉛筆ボタンを押してね!