【入門＆考察】TypeScriptの特徴、パフォーマンス、メリットデメリットに関して
もうTypeScriptの記事なんて割と今更感ありますが...。
技術選定時に”流行だからTypeScriptを採用する！”で進めないように、概要や目的、パフォーマンスに関してざっくり情報整理しました。
TypeScriptの初学者や、技術選定で参考にしたい方向けに。
TypeScriptとは？
JavaScriptの仕様をベースに拡張されたプログラミング言語。
型の指定が出来るJavaScript。静的型付け言語に分類されます。
※静的型付け言語：コンパイルした段階で、変数に定義した型の整合性を検証するシステム。
例）C/C++/Javaなど。
特徴
ブラウザ上で動作不可
TypeScriptそのものをブラウザ上で動作させる事は出来ません。流れとしては以下の通り。
1. TypeScriptを記述
2. 変換（コンパイル）
3. 出来上がったファイル(JavaScript)を実行しブラウザ上で動作
そこで最終的に得られる成果物はJavaScriptのコードになります。
ですので、新しいプログラミング言語というよりは『JavaScriptを生成するツール』として捉えても良いと思います。
あくまでJavaScriptの”補助”的な役割
上記のようにJavaScriptを生成する事で動作させるため、JavaScriptに出来ない事はTypeScriptにも出来ません。また、TypeScriptで提供する機能は、JavaScriptを安全に動作させるための補助的な役割になります（詳細はまた次回）。これにより、開発者は早い段階からエラーに気付けます。
理解しやすく、クリーンなコードを書く事を補助してくれています。
TypeScriptの目的
以下のコード例を参考。
function add(num1, num2) {
return num1 + num2;
}
console.log(add('2', '3')); // 数値の加算を想定した関数なのに、文字列の結合が起こる.
上記はJavaScriptで記述したプログラムです。
これを実行すると、コメント箇所で期待と異なる動作が発生します。
JavaScriptは動的型付け言語ですので、熟練者でない限りプログラム実行時までエラーに気付けない事が大半です。
TypeScriptは、こういったJavaScriptの安全面の課題を解決し、支援するツールでもあります。
TypeScriptが提供している機能
型による定義
number/string/boolean/Array/enum/tuple/anyに加え、union型（複数の型を結合し扱う）やliteral型(constのように、値が不変である変数に指定)など。
新旧JavaScriptの互換性
Babelのように、新しい世代のJavaScriptの機能を古いブラウザでも動作するようにコンパイルしてくれます。
Babel：新VerのJavaScript（ES6以降）を、旧Verでも動作できるよう変換してくれるツール。
interface、class
JavaScriptよりもオブジェクト指向に則った機能が提供されています。C++やJava等と同様です。
豊富なオプション
コードのエラーチェックのレベルを変更したり、コンパイル対象のフォルダを指定するなど豊富なオプションが備わっています。
ジェネリクス
扱う型を抽象化する事で、外部から渡されたパラメータに応じて動作を変えられます。（※次回解説）
デコレータ
@ から始まる記述。継承不要でカスタマイズ可能で可読性も上がりますが、やりすぎには注意。（※次回解説）
学習コスト
JavaScriptやオブジェクト指向言語を理解していれば入門には易しいものの、他の静的型付言語とは異なる面もあったりと
使いこなせるまでには少し時間を要するかもしれません。
まぁほとんどの技術に言えますが、結局は慣れです。
パフォーマンス面
一言で言うとJavaScriptと同等です。
これは、TypeScriptのコンパイラは『最適化を行わない』ことに起因しています。
他のコンパイラ言語とは異なるのですが、実行ファイルのメモリを抑え、実行速度を上げる事は行いません。
あくまでコードエラーをチェックし、JavaScriptへ変換するだけです。
メリット
- 早い段階でエラーチェックが行える
JavaScript/Pythonなどの動的型付け言語のデメリット（実行時までエラーに気付けない）をある程度解決した形。
また、VSCodeとの相性も良く、型推論によりコーディング時からエラーチェックする事も可能。これは便利です。 - 開発環境/エディタによる高性能なサポート
上記に加え、自動補完や強力なサジェスト機能など。 - 可読性の高さ
型宣言によりコードの意図が読み取りやすくなるため、JavaScriptと比較すると可読性は向上します。 - オブジェクト指向に則った開発が可能
JavaScriptではprivate/protected宣言が出来なかったり、本来のオブジェクト指向としては不十分な面がありました。
TypeScriptではそれが可能です。 - 古いJavaScript環境を対象とした開発でも最新構文を適用可
コンパイルを通して、任意のVerの構文で書かれたJavaScriptに変換可能です。
tsconfig.jsonの”target”オプションでJSのVersionを指定できます。
デメリット
- （静的型付け言語とはいえ）エラーを100%未然に防ぐ事はできない
ココは結局開発者の技量に依存します。 - ”どこまで制限をかけるか？”の判断が難しい
TypeScriptを用いたプロジェクトでは、極力any型（どんな型の代入も許可する型）の使用を禁じる事が一般的かと思います。
しかし、any型なくしてはコーディング不可能な場面も時々遭遇します。
こういった場合に、チームとしての方針・コーディングルールを厳密に設けている必要があります。 - コードは長くなる
コード内で型宣言の占める割合が、ロジック部よりも多くなるケースも考えられます。 - JavaScriptの方が（良くも悪くも）柔軟性は高い
コードにバグを埋め込む可能性を下げる代償として、柔軟性は下がります。
プロトタイプとしてコードを作成する段階にいるのなら、JavaScriptで記述する事も検討出来るかと思います。
後々TypeScriptに置き換える事も可能なので。
感想・その他
あまりサービスの規模感関係なく選定できるように感じます。
静的型付言語に慣れている方であればとっつきやすい言語かもしれませんね。
しかし当然デメリットも幾つか挙げられるため、「流行だから！」と言って採用して、後々プロジェクトが遅延する...なんて事が無いように。技術選定時には要注意です。
余談ですが私は実務ではバックエンド担当です。
NestJSを使用しているのですが、コードであるTypeScriptの理解を深める事で間接的にレベルアップ出来ると判断しTypeScriptを学習しました。
次回から各機能の詳細を紹介していきます。
Discussion