【TypeScript】vscodeでコンパイルする流れ
概要
最近、TypeScriptも普通の流れになってきていて、vscodeで実際にコンパイルするまで流れをメモ。
インストール
コンパイルする先にまずはNode.jsをインストールしておく。
npmを使ったり、TypeScript のトランスパイラである tsc コマンドは、Node.js のパッケージとして提供されているので必要です。
その後、npmパッケージでTypeScriptをインストールしておく。
どこでも使えるように[-g]でグローバルを指定。
npm install -g typescript
ここまで準備したら実際の流れは移行。
コンパイルまでの流れ
VScodeで適当なプロジェクト作ったらそこに移動しておく。
JSONファイルの作成
まずは、プロジェクトのパッケージ依存関係やビルドスクリプトのための「package.json」と
TypeScript 用のビルド設定ファイルである「tsconfig.json」を作成する。
//package.json
npm init -y
//tsconfig.json
tsc --init
上記を実行するとtsconfig.jsonファイルが作成されて下記のようなファイルが作成される。
＊コメントアウトされていた箇所は記載していません
{
"compilerOptions": {
"target": "es2016",
"module": "commonjs",
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"strict": true,
"skipLibCheck": true
}
}
コンパイル元のファイルとコンパイル先を指定
実際にTypeScriptのファイルをコンパイルするにあたり、どこのフォルダにあるTypeScriptファイルをコンパイルしてどこに書き出すのか指定することができる。
- index.html
- src/main.ts
- dist/main.js
上記のようにしたい場合はtsconfig.jsonファイルのcompilerOptionsにrootDirとoutDirがコメントアウトされてるので、そこを指定する。
"rootDir": "./src",
"outDir": "./dist",
includeによる階層化したフォルダをコンパイル対象とする
例えば、src配下のファイル全て（）がコンパイル対象にしたい場合は以下。
"compilerOptions": {
//ここは省略
},
"include": ["src/**/*"]
上記の場合は、拡張子を指定しない（*のみ）だと、.ts``.tsx``.d.tsの拡張子が対象らしい。
また"allowJs": trueの場合は.jsと.jsxの拡張子も対象となる。
{
"compilerOptions": {
"/* JavaScript Support */
"allowJs": true,
}
}
コンパイルしてみる
実際にコンパイルするには、ターミナルで以下を実行してコンパイルする。
tsc
そうすると、distフォルダ内に、main.jsが作成されてるはず。
変更を監視する
TypeScriptファイルを変更して確認するたびにコンパイルもめんどうなので変更して保存したら自動的にJavaScriptファイルへのコンパイルが実行されたほうが楽ですよね。
tsc --watch
npmでも実行できるようにしてみる
よくnpm run devといったコマンドを打つことがあるが、package.jsonのscriptsの箇所にビルドコマンドを登録できる。
{
"scripts": {
"build": "tsc",
"build:watch": "tsc --watch"
},
// ...
}
上記の場合は下記のようなコマンドで実行できる
nmp run build //tsc
npm run build:watch //tsc--watch
まとめ
駆け足でメモしたが、以下のサイトを参考にしました。
ありがとうございます。
Discussion