TypeScriptでの開発の進め方

初めてTypeScriptを触りました。

いろいろな機能があり混乱したので、
今後、このやり方で進めるときに忘れないように記事に残しました。

1. ディレクトリ構造の例

プロジェクト/
  ├── src/ 
  │   └── example.ts
  ├── dist/  
  │   └── example.js
  └── tsconfig.json

2. tsconfig.jsonの設定

{
  "compilerOptions": {
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "module": "commonjs",
    "target": "es2016"
  }
}

3. コンパイル

tsc

1. .tsから.jsにコンパイルする
2. これだけでOK

4. 開発ワークフロー

新規ターミナル作成: Ctrl + Shift + @

tsc --watch

別ターミナルで実行確認

node dist/example.js

下記のような表示になればOK

[16:47:46] File change detected. Starting incremental compilation...

[16:47:46] Found 0 errors. Watching for file changes.

あとは.tsを上書き保存すればリアルタイムで.jsに反映される

5. 手順のまとめ

1. プロジェクトフォルダ作成
2. tsconfig.json の設定
3. srcとdistフォルダの作成
4. VS Codeで開く
5. ウォッチモード起動
6. コーディング開始