今回は、Visual Studio CodeでTypeScriptをコンパイルする設定のメモです。
小規模なTypeScriptであれば、tscコマンドでのコンパイルで事足りると思います。
しかし、複数のファイルを同時にコンパイルする場合や、
決まったルールでコンパイルを行う場合には、VsCodeの機能でコンパイルできたら便利だと思います。
最小限の内容をメモしたいと思います。
目次
環境
VsCode Version：1.50.1
TypeScript Version：4.0.3
VsCode 設定・ビルド実行
以下の形で配置されている2種類のtsファイルを、
同じフォルダにそれぞれjsファイルとしてコンパイルする為の設定を行います。
・tsconfig.json 作成
まずは、TypeScriptのビルド設定ファイルを作成します。
以下のコマンドを実行すると、tsconfig.jsonという設定ファイルが生成されます。
TypeScript Deep Dive 日本語版 tsconfig.json
tsc --init
・Build Task 実行
tsconfig.jsonがあれば、VsCodeの機能を利用してビルドを行える様になります。
ビルド実行は、メニューTerminal -> Run Build Taskより行います。
ビルド実行時にオプションを選択します。
buildを選択すると、１度だけビルド実行されてjsファイルが出力されます。
watchを選択すると、tsファイルへの変更を監視して、変更される度にビルド実行されます。
正常にビルドされた場合、メッセージが表示され、
jsファイルが出力されます。
・jsファイル出力先 設定
tsファイルと同じ場所にjsファイルが出力されると、管理が手間になります。
出力先を変更する場合、tsconfig.jsonを修正します。
tsconfig.jsonの”outDir“のコメントアウトを外して、出力したいディレクトリを指定します。
tsconfig.jsonを修正した後に、Build Taskを実行すると、
指定したディレクトリにjsが出力される様になります。（権限に問題がなければ、フォルダは自動生成されます）
今回のメモ内容は以上となります。
TypeScriptは、大規模なjs実装を行う際の最適な選択肢ですが、
ビルド周りの事情が複雑化しやすいです。
状況によっては、WebPackなども利用する必要が出てきますので、
必要に応じてメモしておきたいと思います。
