Typescriptをとにかくサクッと快適に始めるセット

TypeScriptの環境を作るとき、Dockerで作ることもありますが、
Dockerを使わずにサクッと自動コンパイルするところまで作りたいことも多いので、備忘録。

必要なパッケージのインストールと初期化

yarn
yarn add typescript
yarn add -D ts-node ts-node-dev
npx tsc --init

監視するファイルを作成

srcディレクトリを作成し、配下にindex.tsを配置

src/index.ts

tsconfig.jsonの記載

{
  "compilerOptions": {
    "target": "es2022",  // コンパイル時に出力するJavaScriptのバージョンを指定する
    "module": "commonjs",  // モジュールの種類を指定する
    "sourceMap": true,  // ソースマップを出力するかどうかを指定する
    "esModuleInterop": true,  // CommonJSモジュールとESモジュールの間での相互運用性をサポートする
    "moduleResolution": "node",  // モジュールの解決方法を指定する
    "forceConsistentCasingInFileNames": true,  // 大文字小文字の一貫性を保つ
    "strict": true,  // 厳密な型チェックを有効にする
    "skipLibCheck": true,  // ライブラリの型チェックをスキップする
    "rootDir": "./src",  // TypeScriptファイルのルートディレクトリを指定する
    "outDir": "./dist",  // コンパイルしたJavaScriptファイルを出力するディレクトリを指定する
    /* JavaScript Support */
    "allowJs": true,  // JavaScriptファイルをコンパイルできるようにする
    "baseUrl": "./",  // 相対モジュールを解決するためのベースディレクトリを指定する
    "paths": {  // パスの別名を指定する
      "#/*": ["src/*"]
    }
  },
  "include": ["src/**/*"]  // コンパイルするファイルを指定する
}

package.jsonにscriptを追記

  "scripts": {
    // 省略
    "dev": "ts-node src/index.ts",
    "dev:watch": "ts-node-dev --respawn src/index.ts"
  },

これで、yarn dev:watchとすると自動コンパイルが走って、
コマンドラインに出力される。