筆者がTypeScriptを学ぶ上で読んだ プログラミングTypeScript スケールするJavaScriptアプリケーション開発」を読んで終わりにしないために、記事という形でアウトプットしたかったので投稿します。タイトルはシリーズ化させたかったので、それっぽいものにしました。
誤った情報を記載していましたらコメントなどで教えていただけると嬉しいです。
では、早速書いていきます。
TypeScriptの全体像
TypeScriptはTSC（TypeScriptコンパイラー）によって型チェックがなされた後に、JavaScriptコードにコンパイルされ実行されるというのが全体の流れです。
- TypeScriptソースコードをTypeScript AST(abstract syntax tree：抽象構文木)に変換
- ASTが型チェッカー（type checker）によってチェックされる → TypeScript最大の恩恵
- TypeScript ASTをJavaScriptコードへ変換
- JavaScriptコードをAST(abstract syntax tree：抽象構文木)に変換
- ASTをバイトコード（仮想マシンが実行可能なコード：中間コードの総称）に変換
- バイトコードがランタイムによって評価（実行）される
以上が大雑把ではありますが、TypeScriptが実行されるまでの全体像です。TypeScriptは静的型付け言語ですが、その型自体はTSC自体に評価されず、変換されるJavaScriptコードに影響を及ぼしません。型チェッカーによってのみ評価されるので、めちゃくちゃなデータ型をTypeScriptコードで実装していたとしても、アプトプットされるJavaScriptにはなんの影響もないということです。
型チェッカー（Type Checker）
これがあるからTypeScriptを書いていると言っても過言ではないでしょう。型チェッカーはTypeScriptを支える魔法です。コードが型安全であることを検証してくれます。これにより、**JavaScriptの場合、プログラムの実行時にほとんどのエラーが検出されていた（ユーザーテストなどで）ところが、プログラムの実装時に気づくことができるようになるのです。**ありがたいですね。
tsconfig.json とは
全てのTypeScritpプロジェクトはルートディレクトリにtsconfig.jsonファイルを含んでいなければなりません。
tsconfig.jsonとは一体何者でしょう？
TypeScriptプロジェクトを定義するためのファイルです。具体的には以下のような設定を記載して、TypeScriptプロジェクトを定義します。
| オプション | 説明 |
|---|---|
| include | TSCがTypeScriptファイルを見つけるためにどのフォルダーを探すべきか |
| lib | コードを実行する環境にどのAPIが存在しているとTSCが想定すべきか。開発者自身がどのバージョンのTypeScriptを使用しているかによって想定されるJavaScriptAPIが含まれるか変化するので、それに対応したものを指定する |
| module | TSCがどのモジュールシステムにコンパイルするべきか？（CommonJS, SystemJS, ES2015など） もっと大雑把にいうとどのようなJavaScriptに変換しますかというオプション |
| outDir | 生成するJavaScriptコードをどのフォルダに格納すべきか |
| strict | 不正なコードをチェックする時に、できるだけ厳格にチェックするようにできる。このオプションによって全てのコードに適切に型付けされていることが強制される。TypeScriptの恩恵を受けるためのオプションと言っても過言ではない。 |
| target | TSCがコードをどのバージョンのJavaScriptにコンパイルするべきか？（ES３、ES5、ES2015,ES2016など） |
実際にコードを記載したときの例
{
"compilerOptions": {
"lib": ["ES2015"],
"module": "commonJs",
"outDir": "dist",
"sourceMap": true, //TypeScriptコードとそこから生成されたJavaScriptコードとの対応関係を記述したファイルを生成するかどうか
"strict": true,
"target": "es2015"
},
"include": [
"scr"
]
}
tslint.json とは？
コーディングルールを記載したファイルです。tsconfig.jsonとは異なり、こちらのファイルは必須ではありませんが、あった方が良いでしょう。特に複数人で開発する時はコーディングルールを明確にしておいた方が可読性や保守性があがるので作成した方が良いと思います。
以下のコマンドでファイルを生成できます。
./node_modules/.bin/tslint --init
なお、TsLintは2019年の時点で非推奨になっており、ESLint（JavaScriptのリンター）をTypeScript用のプラグインと共に使用することが推奨されます。
設定方法は以下の記事が参考になります。
脱TSLintして、ESLint TypeScript Plugin に移行する
終わりに
次回はTypeScriptのキモであり、TypeScriptをTypeScriptたらしめる最大の特徴型について投稿しようと思います。シリーズとして複数本投稿するつもりですので最後まで読んでくださった型は次回も読んでいただけると嬉しいです。
また冒頭にもお伝えいたしましたが、誤った情報を記載していましたらコメントなどで教えていただけると嬉しいです！