読者です 読者をやめる 読者になる 読者になる

もやもやエンジニア

IT系のネタで思ったことや技術系のネタを備忘録的に綴っていきます。フロント率高め。

TypeScriptを試してみた 1

3連休を全部だらだらするのはもったいないので、かねてから気になっていたTypeScriptを触ってみました。

TypeScriptとは!

マイクロソフトが開発したJavaScript系の新言語で「JavaScriptのスーパーセット(=上位拡張仕様)」で、ECMAScriptの次期標準であるver6をみすえた言語実装となっているようです。拡張子は「ts」でコンパイルすることでJavaScriptのファイルに変換されます。
近年、JavaScriptの重要性が増すにつれて開発規模も拡大しているという背景から「クラスベースなオブジェクト指向言語」のいいところを取り入れてみましたという話。
まー言うてもJavaScriptの根っこはプロトタイプベースであることに変わりはなくあらゆるものはオブジェクトであるので、一言で言うならばクラスベースな概念を取り入れたJavaScriptのシンタックスシュガーであるというところでしょうかね。

特徴

マイクロソフト発だけどオープンソース。ライセンスはApache License(どうしたMS !)
ECMAScript 6の仕様を先取り
・静的に型付けする
・クラスベース
・アロー関数
・最終的にはJavaScriptのソースを出力する
JavaScriptのコードを最適化するわけではないので注意

準備

MacOSでの話です。WindowsとかLinuxの方はググって下さい。
①npmでコンパイラをインストールします。以上。node.jsが入っていない人は事前に入れてくらさい。

sudo npm install -g typescript

コードを書いてコンパイルしてみた

// namespaceっぽい
module TSTest{
     // クラス定義
    export class Sample{
        // コンストラクタ
        constructor(private text : string){
        }
        // メソッド
        display(_InAddText : string) : void{
            console.log(this.text + ' ' + _InAddText);
        }
    }
}
var sample : TSTest.Sample = new TSTest.Sample('Hello, World !!!');
sample.display('TypeScript!');

// Hello, World !!! TypeScript!と出力

Javaとか.Netっぽいですね。変数のスコープと型が明示出来るようになっています。

んで、コンパイルしてみます。ターミナルを開いて作ったファイルを指定

tsc sample.js

するとJavaScriptが同じフォルダに作成されます。コードでエラーがあったりするとコンパイルでちゃんと弾かれます。JavaScript書いてるつもりで型変換でこけると新鮮・・・

var TSTest;
(function (TSTest) {
    var Sample = (function () {
        function Sample(text) {
            this.text = text;
        }
        Sample.prototype.display = function (_InAddText) {
            console.log(this.text + ' ' + _InAddText);
        };
        return Sample;
    })();
    TSTest.Sample = Sample;
})(TSTest || (TSTest = {}));
var sample = new TSTest.Sample('Hello, World !!!');
sample.display('TypeScript!');

見慣れた読みづらいコードが出てきました。可読性の面から見ればTypeScriptで書いた方が幸せになりますね。ただ、先ほど述べた通り、コンパイラによって最適化されるものではないというのは覚えておく必要があります。

実行速度について興味深い検証を行っている記事を見つけたので引用
http://spheresofa.net/blog/?p=757

おまけ

コンパイルする時に毎回ターミナル開くのもあれなのでエディタで出来るようにしました。
ということで最近お気に入りのSublime Text 2です。
Package ControlからTypeScriptとTypeScript Compilerを入れてみてセッティング。。。したはいいけど、TypeScriptのコード内に日本語が混じっていると上手く動かない罠。

色々探してこの辺参考に
http://gist.github.com/remcoder/3814020

メニューでTools -> Build System -> New Build Systemとやるとbuildの設定ファイルが開くので上のgistに書いてある内容をコピってtypescript.sublime-buildで保存。
tsファイル上でcommand+bでビルド出来るようになります。

次回に続く

もうちょっと新しい機能を試してみてTypeScriptの紹介は終わろうかなと思います。