TypeScriptを触ってみた

TypeScriptを触ってみたので覚書。結構良さげ。

環境構築

最近sublime text2使ってるからyanzmさんが書いてるのを参考に環境構築。

上記エントリーには書いてないけど、以下のコマンドでTypeScriptをインストールするのも忘れずに。

sudo npm install -g typescript

書き方を学ぶ

以下のエントリーたちが参考になった。

phyzkit.net -&nbspphyzkit リソースおよび情報
phyzkit.net は、あなたがお探しの情報の全ての最新かつ最適なソースです。一般トピックからここから検索できる内容は、phyzkit.netが全てとなります。あなたがお探しの内容が見つかることを願っています!
 phyzkit.net 

大体の仕様を把握したら本家からSampleCodeをダウンロードしてきて動かしてみるといいと思う。

他のファイルを参照

TypeScriptでjsをrequireするような機能はない。tsファイルをrequireしかできないみたい。他で定義されているtsファイルを使いたい場合は以下のように記述する。jQueryとか使いたい場合はこの機能でtsファイルに変換されたjQueryをrefarenceで持ってくることで使える

/// <reference path="hello.ts"/>

まとめて1ファイルを作る

自分で作っているtsファイルなのであればまとめて1ファイルにコンパイルしてしまえばrefarenceの記述をしなくても依存関係をちゃんと見てくれるみたい。まとめてコンパイルするときは以下の様なコマンドを使う

tsc –sorcemap -o output.js input1.js input2.js input3.js

オプションで指定してる[–sourcemap]はエラー時に圧縮前のtsファイルの行番号を出してくれるようになるらしい。つけといたほうが何かと便利。詳しいオプションは「tsc -h」で見れる

どう変換される?

module

moduleで外からも使用したい関数を使う場合はexportをつけてあげると参照できるようになる。

変換前:

module Page1 {
	function func1 {
		console.log('func1!');
	}
	export function func2 {
		console.log('func2!');
	}
}

変換後:

var Page1;
(function (Page1) {
    function func1() {
        console.log('func1!');
    }
    function func2() {
        console.log('func2!');
    }
    Page1.func2 = func2;
})(Page1 || (Page1 = {}));

class

publicとかprivateとか指定できるけど、何も意味ない。変換後は結局prototypeに登録される。prototypeに登録されたくない場合はstaticを使いましょう。

変換前:

class Page {
	private num : number = 3;
	public str : string = 'str';

	constructor() {
		this.num = 1;
		this.str = 'string'
	}

	private func1() {
		console.log('func1!');
	}

	public func2() {
		console.log('func2!');
	}

	static func3() {
		console.log('func3!');
	}
}

変換後:

var Page = (function () {
    function Page() {
        this.num = 3;
        this.str = 'str';
        this.num = 1;
        this.str = 'string';
    }
    Page.prototype.func1 = function () {
        console.log('func1!');
    };
    Page.prototype.func2 = function () {
        console.log('func2!');
    };
    Page.func3 = function func3() {
        console.log('func3!');
    }
    return Page;
})();

まとめ

とりあえずわかったのはこれぐらい。結構便利に使えそう。HashChangeでページをページの中身をAjaxでデータ取得して書き換えるとかやってるとどうしてもファイルが巨大になってしまうんだけど、こいつを使えば分割しておいて最終的にコンパイルして1ファイルにしてしまえばいいから保守性はかなり向上しそう。あとは継承とかをうまく使って書いてあげればコードは激減できそうだなぁ。