選択肢が少ないということは幸せなことなんだよ。

TypeScriptはじめました

気になりつつ触っていなかったTypeScriptをはじめました。
いやー、良い言語ですね。

TypeScriptのいいところ

私がわざわざ書くまでもなく、巷でいいところは語り尽くされていると思います。
なので、簡単にだけ私の思っていたことを書きます。

  • 第一印象は「JavaScriptっぽい構文」だな
    • でも、JavaScriptっぽいだけあって、TypeScript特有の記述が入ってくると混乱する…
  • とりあえずHelloWorldを書いたり、型指定を自分で書いてtscコマンドに通してみる
  • 出力されたJSを眺めてみたり、tscで出たエラーメッセージを読んで見る
  • あぁ、なるほど、そういうことね。完全に理解したわ

…といった感じでした(雑)

参考資料

Introduction - TypeScript Deep Dive 日本語版

こちらのTypeScriptの良さについてまとまっておりお薦めです。
この記事から私が体感したことを引用します。

JavaScriptはTypeScriptである

あなたのJavaScriptコード.jsファイルを.tsファイルに名前を変更したとしても、TypeScriptは元のJavaScriptファイルと同じ有効な.jsを返します。TypeScriptは意図的かつ厳密なJavaScriptのスーパーセットであり、任意の型チェック機構を持ったプログラミング言語です。

『TypeScriptはJavaScriptに型を追加しただけのもの』と過去に聞いたことがあったのですが、
実際に触ってみたら本当にそのとおりでした。
つまり、JavaScriptが使えればTypeScriptは使えます。

TypeScriptの良さを感じるには当然型を使わないと意味が無いのですが、
単純に覚えることが少なくて済むことは学ぶ上で有利ですし、
チーム開発するのであれば、最悪JavaScriptだけ書ける状態の人であれば、開発に参加することができます。

また、既存のJavaScriptのライブラリ全てが使用可能であるというのも、大きな利点です。

コンパイルでエラーがでる

型は、リファクタリングを行う際の開発速度を高めます。コンパイルの時点でエラーを検出する方が、ランタイムでの実行時にエラーが発生するよりも優れています

これは実際に触っていて体感しました。

例えば、ごく単純な以下のようなコードを書きます。

const button = document.getElementById('button');  
button.addEventListener('click', () => {  
    // なにかする  
});  

これはTypeScriptでは2行目でエラーが出ます。

Error:(3, 1) TS2531: Object is possibly 'null'.

getElementByIdは、HTMLElementnullを返す関数です。
仮に何かの間違いでgetElementByIdHTMLElementが取得できなかった場合、
2行目のaddEventListener

Uncaught TypeError: Cannot read property 'addEventListener' of null

とエラーが発生するはずです。

この例で、もしbuttonが必ず必要なものなのであれば、

const button = document.getElementById('button');  
if (!button) {  
    throw new Error('buttonがありません!');  
}  
button.addEventListener('click', () => {  
    // なにかする  
});  

としておけば、 Uncaught TypeError: Cannot read property 'addEventListener' of null よりもわかりやすいエラーが発生してデバッグしやすくなるでしょう。

JavaScriptであれば、buttonがnullになる可能性を考慮できていなければ、実行時に発生しない限りエラーに気づけませんが、
TypeScriptは型を厳密に確認してくれるため、実行しなくても事前にそのエラーの可能性を知ることができ、より堅牢なコードにすることができます。

コードのメンテナンス性が上がる

型は、完璧なドキュメントです。関数のシグネチャは定理であり、関数の本体は証明です

従来のJavaScriptは、WebStormなどのIDEを使っていればある程度型などを追って表示してくれます。
また、クラス定義などの際にも、@paramなどのアノテーションをコメントブロックに書くことで補完することもできます。

しかし、これらの機能はあくまでIDE固有のものでJavaScript本来の機能ではありません。
もしコメントブロックのアノテーションが間違っていれば、間違ったまま使用してしまうことになります。
つまり、間違ったドキュメントとして作用してしまうことになります。

対して、TypeScriptでは、引数ひとつひとつにも固有の型を指定することができ、コンパイル時に確実に型をチェックしてくれるため、ソースに書かれている型そのものがドキュメントとなり得ると言えます。

まとめ

簡単ですが、1週間触ってこのようなことを感じました。

JavaScriptに慣れていれば慣れているほど最初は違和感があるかもしれませんが、1から言語を始めるよりはよっぽど簡単ですし、
JavaScriptとは全く別の言語であるぐらい堅牢で読みやすく書きやすい言語ですので、強くオススメします。

この記事へのコメント

まだコメントはありません