TypeScript ビルド コンパイル 設定 Visual Studio Code

今回は、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

・Build Task 実行

tsconfig.jsonがあれば、VsCodeの機能を利用してビルドを行える様になります。

ビルド実行は、メニューTerminal -> Run Build Taskより行います。

ビルド実行時にオプションを選択します。

buildを選択すると、1度だけビルド実行されてjsファイルが出力されます。

watchを選択すると、tsファイルへの変更を監視して、変更される度にビルド実行されます。

正常にビルドされた場合、メッセージが表示され、

jsファイルが出力されます。

 

・jsファイル出力先 設定

tsファイルと同じ場所にjsファイルが出力されると、管理が手間になります。

出力先を変更する場合、tsconfig.jsonを修正します。

tsconfig.jsonの”outDir“のコメントアウトを外して、出力したいディレクトリを指定します。

tsconfig.jsonを修正した後に、Build Taskを実行すると、

指定したディレクトリにjsが出力される様になります。(権限に問題がなければ、フォルダは自動生成されます)

 


 

今回のメモ内容は以上となります。

TypeScriptは、大規模なjs実装を行う際の最適な選択肢ですが、

ビルド周りの事情が複雑化しやすいです。

状況によっては、WebPackなども利用する必要が出てきますので、

必要に応じてメモしておきたいと思います。


------------------------------------------ スポンサーリンク ------------------------------------------
都内でエンジニアをやっています。 2017年に脱サラ(法人設立)しました。 仕事で調べたことや、気になったことをメモしています。
投稿を作成しました 123

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


関連投稿

検索語を上に入力し、 Enter キーを押して検索します。キャンセルするには ESC を押してください。

トップに戻る