女性向けエンジニアスクール
3秒でわかる
TypeScriptのコンパイル設定をまとめたファイル。型チェックの厳しさ、対象ファイル、出力先をここ1か所で決めます。
もう少し詳しく
どういうものか
tsconfig.json は、TypeScriptプロジェクトの設定ファイルです。どのファイルを対象にするか、どのバージョンのJavaScriptへ変換するか、型チェックをどこまで厳しくするか、出力をどこへ置くかを記述します。このファイルが置かれたディレクトリがプロジェクトの起点になり、エディタの補完やエラー表示もこの設定を読んで動きます。
なぜ必要か
設定がファイルに書かれていないと、コンパイル時のオプション指定が人によって変わります。自分の環境では通るのに他の人の環境では大量にエラーが出る、という状態はここから生まれます。設定をリポジトリへ入れておけば、エディタもコマンドもCIも同じ判定になります。エディタが波線を出す根拠もこのファイルなので、実行しなくても全員が同じ結果を見られます。
具体例
{
"compilerOptions": {
"target": "ES2022",
"module": "ESNext",
"moduleResolution": "bundler",
"strict": true,
"noUncheckedIndexedAccess": true,
"outDir": "./dist",
"baseUrl": ".",
"paths": { "@/*": ["./src/*"] },
"skipLibCheck": true
},
"include": ["src/**/*"],
"exclude": ["node_modules", "dist"]
}strict を true にすると、暗黙のanyやnullの見落としをまとめて検出する複数のオプションが一括で有効になります。新規プロジェクトでは最初から有効にしておくのが結果的に楽です。
つまずきやすいところ
paths を設定してエディタの補完は効くのに、実行すると解決できないという詰まり方が非常に多く見られます。paths はあくまで型チェック時の解決規則で、実行時のモジュール解決は別の仕組みだからです。バンドラや実行環境の側にも同じ別名を設定する必要があります。もうひとつは strict を後から有効にして数百件のエラーが出る場合で、一度に直そうとすると手が止まります。個別のフラグを1つずつ入れて段階的に潰します。include を書き忘れると意図しないファイルまで対象になり、テストや設定ファイルの型エラーで止まることもあります。skipLibCheck は依存ライブラリの型定義の検査を省く指定で、ビルド時間の短縮に効きます。
似た用語との違い
| ファイル | 役割 |
|---|---|
tsconfig.json | 型チェックと変換の設定 |
package.json | 依存関係とスクリプトの定義 |
.eslintrc | コードの書き方の規約 |
大きなリポジトリでは、共通設定を1つ置き、各パッケージが extends で継承する形にすると重複が消えます。
