typescript1.x -> 2.0にした話

この記事はPMOB Advent Calendarの9日目の記事です。

www.adventar.org

前の記事: そうだ俺が怠惰の罪だ - Zodiacの黙示録
次の記事: 後世に残すモノづくり - ざっきーの雑記ー

1.x使ってたときの話

ぼくはとある事情でthree.jsを触っているのですが、 javascriptが書きたくなくてtypescriptを使うことにしました。

ぼくが始めたときの最新版が1.x(xは忘れた)だったので、それを使いました。

外部ライブラリ(jQueryとか)使うときはコンパイル用の定義ファイルというのが必要になるんですが、 1.xではtypingsとかいう別のnpmモジュール?を使うことで一括管理が出来るので便利でした。

three.jsはDefinitelyTypedが定義ファイルを作ってくれてたので、 まあそれを使うということで、typings経由でダウンロード、typings.jsonで管理、という感じにしてました

ただ、わざわざtypingsとかいうのを入れるのが面倒だし、npmモジュールにも依存関係とかがあるので、 そこら辺が複雑になって面倒だな〜〜とは思ってました。

2.0になって

なんか結構変わっててビビった。
個人的に良かったのは、前述の定義ファイル管理。
npmだけで完結するようになった！

npm install --save @types/jquery

みたいな感じでダウンロードできて、npmの@types/以下で管理できるようになりました。
これは地味に便利。

あと、if文で型の絞り込みが出来るようになってました。 公式からの引用ですが、

function foo(x: string | number | boolean) {
    if (typeof x === "string") {
        x; // ここではstringに絞りこまれている
        x = 1;
        x; // numberに変わった
    }
    x; // number | boolean に絞りこまれている
}

function bar(x: string | number) {
    if (typeof x === "number") {
        return;
    }
    x; // 残るは string だけ
}

こんな感じ。

最後に

まあぼくはそんなガチ勢じゃないので嬉しかったのは書いたやつぐらい。
多分ちゃんと触ってる人はもっと見るべきところがあるって言うと思います。
ちなみに、three.jsも最新版に上げたらES6になってて、地味にgulp-uglifyが死にました(ES6非対応)。
javascriptは書いてはいけない。

あとどうでもいいですが、はてなブログってtypescriptのシンタックスハイライトできるんですね。