tsconfig と strict ― プロジェクトの設定｜TypeScript学習コース BecomeCoder

導入

ここまではブラウザ内の実行環境で TypeScript を試してきましたが、実務のプロジェクトでは tsc（TypeScriptコンパイラ）をコマンドラインやビルドツール経由で使います。プロジェクト全体のコンパイル設定は tsconfig.json という1つのファイルにまとめます。

説明

tsconfig.json は、プロジェクトのルートに置く設定ファイルです。「どのファイルを対象にするか」「どのバージョンのJavaScriptに変換するか」「型チェックの厳しさ」などを指定します。

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "strict": true,
    "outDir": "./dist",
    "rootDir": "./src"
  },
  "include": ["src/**/*.ts"]
}

代表的なオプションです。

target: 変換後のJavaScriptがどのバージョン相当になるか（ES2020 など）。
module: 変換後のモジュール形式（ESNext、Node.js 向けなら CommonJS など）。
strict: 厳格な型チェックをまとめて有効にするスイッチ。
outDir / rootDir: コンパイル結果の出力先と、元のソースの場所。
include / exclude: コンパイル対象・対象外にするファイル。

strict: true は、noImplicitAny（型注釈のない引数を暗黙の any として許さない）、strictNullChecks（null / undefined を型で厳密に区別する）などをまとめて有効にします。実務では基本的に strict: true で始めるのが標準です。オフのまま育てたプロジェクトは、後から strict にすると大量のエラーが出て直すのが大変になります。

コンパイルの流れは、次のようになります。

graph LR
    src[".ts ファイル"] --> tsc["tsc（型チェック + JSへの変換）"]
    tsc -->|型エラーがあれば| errors["エラー一覧を表示（出力はしない設定も可）"]
    tsc -->|OK| js[".js ファイル"]
    js --> run["Node.js やブラウザで実行"]

エディタ（VS Code など）は、裏側で TypeScript の言語サーバーを常に動かしていて、tsc を実際に実行しなくても赤い波線でエラーを教えてくれます。また、ビルド前に型だけを確認したいときは npx tsc --noEmit（JSファイルを出力せず型チェックだけ行う）というコマンドがよく使われます。

このコースの実行環境は、学習のために型注釈を取り除くだけの軽量な変換をその場で行っています。実務のプロジェクトでは、この tsconfig.json の設定にもとづいて tsc が型チェックまで含めてコンパイルする、という違いを覚えておきましょう。