TypeScriptでフロントエンドのコードを書いた場合、事前にコンパイルする必要があります。
UI部分が直接TypeScriptで動くわけではなく、ブラウザが認識してくれるのはJavaScriptだからです。そのため、TypeScriptで書いたコードはJavaScriptに変換する必要があり、そのための方法についてメモです。
※今回は、Babelやwebpackを使わず、シンプルな方法についてです。
TypeScriptファイルのコンパイル
例えば、sample.tsというファイル名でTypeScriptを書いた場合、ターミナルで以下のコマンドを打てばコンパイルされ、sample.jsというJavaScriptファイルを生成してくれます。
tsc sample.ts
生成されたJavaScriptファイルには、当然TypeScriptで書いた型定義などは削除されて、実行できる状態のJavaScriptになっています。
Watchモードでのコンパイル
さっきのコマンドだとsample.tsファイルを変更するたびに、コンパイルをしないといけないので、めんどくさいですよね。以下のようなオプション付きでコマンドを打つと、ファイルの変更内容を監視して変更を保存したタイミングでコンパイルしてくれるようになります。
tsc sample.ts --watch
オプション部分は省略可能なので、以下でもOKです。
tsc sample.ts --w
自動コンパイルの監視を停止する場合は、control + C をタイプします。
複数ファイルを自動コンパイルする方法
Watchモードでコンパイルすることで1回1回コマンドを打ってコンパイルしなくてよくなるので、少し楽になりますが、コマンドを見てもらうと分かる通り、自動でコンパイルしてくれるのは1ファイルのみです。
できれば複数ファイルをまとめてコンパイルできるようにしたいですよね。作業しているフォルダを1つのプロジェクトという形でTypeScriptに認識させることで、複数ファイルをまとめてコンパイルできるように出来ます。
ターミナルで該当のフォルダに移動して、以下コマンドを打ちます。
tsc --init
そうすると、そのフォルダの中にtsconfig.jsonというファイルが生成されているはずです。このファイルと同じ階層およびそこより下層にあるファイルが1つのプロジェクトだという認識となります。
その状態でファイル名の指定をせずにtscコマンドをWatchモードで入力すると、そのフォルダにあるファイルを自動でコンパイルしてくれるようになります。
tsc --w