EclipseとTypeScriptでモジュール化されたコードを書く方法

2014/04/04 15:14 | 0 Comments

TypeScript1.0がリリースされたので、簡単に使い方をまとめておく。TypeScript自体のインストールとか、Hello Worldなサンプルについては他にもたくさんあるので省略。

●TypeScriptのメリット

大きなポイントとしては2つあるかなと思っている。

1.静的な型付けが使える

1つめはツールの支援を受けやすいということだ。つまり正確に自動補完させたり、あるいはメソッドの呼び出し箇所からワンクリックで実装箇所へ移動したりできるようになる。

2.既存のJavaScriptをそのまま使える

TypeScriptはJavaScriptのスーパーセットなので、既存のJavaScriptはそのままTypeScriptとして動かすことができる。また、宣言ファイル(xxxx.d.tsというファイル)があれば自動補完の恩恵を受けることができるし、メジャーなライブラリの宣言ファイルはかなり出そろっている( https://github.com/borisyankov/DefinitelyTyped )ので、移行も徐々に進めていけるようになっている。


●EclipseとTypeScript

TypeScriptはEclipseでもプラグインを使えば利用できる。たとえば、次のような感じで自動補完を行える。

既存のライブラリでも、公開されているd.tsファイルと組み合わせれば、たとえばBackboneでも次のような感じで呼び出すことができる。


●TypeScriptでのモジュール化

TypeScriptは言語仕様としてモジュール化に対応しているので、コードベースが膨らんできてもすっきりと扱えるようになっている。TypeScriptでモジュール対応したコードを書いておけば、あとはコンパイルオプションでCommonJSかAMDに対応した形でjsを出力できる。

具体的な手順は後ろの方にまとめておくので、とりあえずモジュール化に対応する書き方を先に見てみよう。まずモジュール側では、classにexportをつければいい。

export class User{
    //以下クラスの定義
}

そしてモジュールを呼び出す側はimport ~ requireを使えばいい。サンプルとしてはこうなる。

import model = require("lib/model");
var user = new model.User();
//以下コードが続く

これをコンパイルオプションに「-m amd」を追加すれば、次のようなjsが出力される。

define(["require", "exports", "lib/model"], function(require, exports, model) {
    var user = new model.User();
 //以下コードが続く
});

で、require.jsを使えば次のようなHTMLで動かすことができる。

<!DOCTYPE html>
<html>
<body>
<script data-main="main" src="require.js"></script>
</body>
</html>

あとは本番環境向けにr.jsで1つのファイルにまとめたりすればいいだろう。


●もう少し詳しい手順
以下、手順をもう少しまとめておく。サンプルは https://github.com/urushio/typescript-amd-sample にアップした。

まず簡単な例(moduletestディレクトリの方)を見てみる。とりあえず動かしてみたければ、Webサーバーにアップしてindex.htmlを開けば、コンソールにメッセージが表示される。

自動補完については、moduleteset/main.tsを開いて、4行目のあたりで、user.と打ち込めば、その後に候補が出てくるのが確認できる。メソッドについてはコメントも表示される。

あるいは、user.speakのspeakにフォーカスを合わせた状態でF3を押せば、メソッドの定義場所へ飛べる。このあたりが静的言語のありがたいところだ。

ちなみにコードを編集する場合は、「tsc -w main.js -m amd」としておけば、関連ファイルが変更された時点で自動的に再コンパイルしてくれるのでラクチン。


次にBackboneを使う場合(backbonetestディレクトリの方)。これも動かしたい場合は、Webサーバーにアップしてindex.htmlを開く。とりあえずModelとViewの簡単な連携をするサンプルになっている。

こちらについても、たとえばmain.tsの8行目でlistview.と打ち込めば、Backbone.Viewのメンバが候補に出てくるのを確認できる。ある程度複雑なフレームワークになると、メンバの数が増えてくるのでありがたい。もちろん自分で書いたモジュールの補完もできるので、プログラムの規模が大きくなってきてもかなりラクに書けるんではないだろうか。


ちなみにTypeScriptは継承やインターフェースはもちろん、ラムダ式やジェネリックも使える。C#が好きな人なら十分愛せるんじゃないかと思う。

このエントリーをはてなブックマークに追加
名前 (必須)
コメント (必須)
確認文字 (必須) ひらがなで「ども」と入力してください。(スパム防止用)