いろいろいじって出た疑問とか

Typescriptがふと読んでみたらとてもよさそうだったので軽く触ってみた。
いろいろサンプルスクリプトとか見てこれなんだろう？的に気になった疑問と自分なりの理解をまとめた。

前置き

環境について

TypeScript - Playgroundみたいな環境をローカルで再現仕様とすると、Visual Studio 2012 Express for Webでtsファイルを単体で開いて編集し、結果のコードはtcsvを使ってリアルタイムプレビューをする。
という状態がよさそうだ。

Visual Studioは変換後と見比べるような機能は無く、変換もビルド実行しないと行われない模様。
インストールもiso形式でDLされるのでいちいちディスクに焼いたりしないといけないしクッソ時間かかったりでVS愛がある人以外にはあまりおすすめできない。*1

公式ドキュメント

なんだか迷わされたがここにあった。
一応ここ読みつつ色々試した。

declareってなんだ？

突然現れたdeclareに戸惑ったが、なんてことはない、変換時に「これはもう存在してますよ」的なことを宣言しているらしい。
jqueryとかの外部ライブラリを使いたい時、そのまま

$.ajax({
})

みたいに書くとコンパイルで怒られてしまう。
なので

declare var $;
$.ajax({
})

とするとコンパイルが通るようになる。

ただこのままだと補完が効かなかったりする。
もし補完がほしいならばTypeScriptのコマンドで下記のようにすると
〜.d.tsというインターフェースを抽出したコードが生成できる。

# ↓hoge.d.tsが生成される。
$tsc --declarations hoge.js 

追記：declare でclassやinterfaceを定義するときはその中身も書かないとダメな模様*2。
〜.d.tsはdeclareで外部のjsライブラリのクラスなんかを宣言したいときに使うものみたい。
(けど実際自分が既存のjsを移植しようってなったらany型に頼っちゃうよなあ・・・)

() => ってなんだ

サンプルとかを眺めていると

var getHue = () => { return this.hue(); };

なんてのを見つけた。え、なに、これは。
色々悩みながら調べてくうちにEcma script6で使われるらしいarrow functionというものの実装らしい。
じゃあ普通のfunctionと何が違うんだっていうと、thisの扱いが違うらしい。
下記のようなコードをコンパイルしてみるとわかりやすい

class cls {
    func() {
        var log1 = function () {
            console.log("hoge" + this);
        }
        var log2 = () => {
            console.log("hoge" + this);
        }
    }
}

↓

var cls = (function () {
    function cls() { }
    cls.prototype.func = function () {
        var _this = this;
        var log1 = function () {
            //functionだとthisをそのまま使う
            console.log("hoge" + this);
        };
        var log2 = function () {
            //allow functionだとthisをクラスとして扱う。
            console.log("hoge" + _this);
        };
    };
    return cls;
})();

allow functionで書いた関数内のthisはクラス自身を引き継ぐ模様。
ちなみにブロックで囲んだ時と囲まなかった時の挙動も違うみたい。

var func1 = (x) => x * x ;    //returnする
var func2 = (x) => { x * x }; //returnしない

↓

var func1 = function (x) { //returnする
    return x * x;
};
var func2 = function (x) { //returnしない
    x * x;
};

なんとなくわかった。きがする。

*1:でもintellisenceはほんとに良い感じに補完してくれる

*2:というかじゃないとclassとかはdeclareする意味無いですね