環境
- OS X Yosemite 10.10.3
- Vim version 7.4.488 ( iTerm 2 )
前提
- brew をインストールしている
- Node をインストールしている
- npm をインストールしている
TypeScript のインストール
$ npm install -g typescript
確認
$ tcs -v
message TS6029: Version 1.5.0-beta
Hello World
テスト用のディレクトリをつくっておく(必須ではないよ。好きにして！)
$ cd Desktop
$ makedir HelloTSC
$ cd HelloTSC
TypeScript ファイルを作成
$ vim HelloWorld.ts
HelloWorld、HelloWorld うるせぇコードになったけどそこは気にしない。
class HelloWorld
{
constructor(public displayText : string) {}
greet()
{
return this.displayText;
}
}
var helloWorld = new HelloWorld("HelloWorld");
document.body.innerHTML = helloWorld.greet();
このコをコンパイルするには
$ tsc HelloWorld.ts
でイケる。実行すると HelloWorld.js が生成されていた。中身はこんなかんじに。
var HelloWorld = (function () {
function HelloWorld(displayText) {
this.displayText = displayText;
}
HelloWorld.prototype.greet = function () {
return this.displayText;
};
return HelloWorld;
})();
var helloWorld = new HelloWorld("HelloWorld");
document.body.innerHTML = helloWorld.greet();
constructor でインスタンス変数を設定できるようです。ふむふむ。
これをこんな感じの恥ずかしめな HTML で実行してみましょう。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script src="HelloWorld.js"></script>
</body>
</html>
innerHTML を使っているので、scriptタグはbody内に突っ込んどいたよ。結果的に "HelloWorld" と表示されるよ。
まとめ
実際に書いてみると、クラスベースで開発してきた方には受け入れやすいシンタックスになっていると思いました。
また、今回はざっくりと触ってみたかったので Mac + Terminal + Vim で作業を行っていました。ですので、実際には Vim のセッティングの方がコーディングよりも時間がかかっていますw
個人的には VisualStudio + VsVim で開発できたほうが効率が良さそうな気がしていますがみなさんはどんな環境で TypeScript を書いているのか気になります。そのうち環境構築方面も調査してポストします。
でわでわ