tsconfig.jsonとは？コンパイル設定をまとめるファイル
tsconfig.jsonとは、TypeScriptのコンパイル方法を、プロジェクト単位でまとめて設定するファイルです。どのファイルをコンパイルするか、どのJavaScriptに変換するか、型チェックをどれだけ厳しくするかを、1か所に書いておけます。
| tsconfig.jsonなし | tsconfig.jsonあり | |
|---|---|---|
| コンパイルのコマンド | tsc index.ts（ファイルを毎回指定） | tsc（これだけで全体を変換） |
| 設定 | 毎回オプションを書く | ファイルに1回書けば済む |
| 向いている場面 | 1ファイルの動作確認 | 複数ファイルのプロジェクト |
なぜtsconfig.jsonが必要なのか
ファイルが増えると、tsc index.ts を1つずつ実行するのは現実的ではありません。tsconfig.jsonを置いておけば、プロジェクトのルートで tsc と打つだけで、対象のファイルをまとめて変換できます。
ひとつ注意点があります。ファイル名を指定して tsc src/index.ts のように実行すると、tsconfig.jsonは読み込まれません。実際に試すと、outDir を dist にしていても、src/index.js がソースの隣に出力されます。
# tsconfig.json があるプロジェクトで
tsc src/index.ts # 設定は無視される。src/index.js が src の中にできる
tsc # tsconfig.json の設定どおりに変換される（outDir が dist なら dist/index.js）TypeScriptの環境構築から確認したい方は、こちらもあわせてどうぞ。
tsc --initでtsconfig.jsonを作る方法
tsconfig.jsonは、プロジェクトのルートで次のコマンドを実行すると生成できます。
tsc --initCreated a new tsconfig.json と表示されれば成功です。生成される中身はTypeScriptのバージョンによって違います。TypeScript 5.9.3で生成したときは、コメントを除くと次の設定が入っていました。
{
"compilerOptions": {
"module": "nodenext",
"target": "esnext",
"types": [],
"sourceMap": true,
"declaration": true,
"declarationMap": true,
"noUncheckedIndexedAccess": true,
"exactOptionalPropertyTypes": true,
"strict": true,
"jsx": "react-jsx",
"verbatimModuleSyntax": true,
"isolatedModules": true,
"noUncheckedSideEffectImports": true,
"moduleDetection": "force",
"skipLibCheck": true
}
}古いバージョンではコメントアウトされた項目が大量に並んでいましたが、最近のバージョンは必要最低限の設定になっています。生成された設定は、そのまま使うより、自分のプロジェクトに合わせて見直すのがおすすめです。
最低限おさえておきたい設定項目
初心者が最初に理解しておきたい設定は、次の4つ（＋対象ファイルの指定）です。
{
"compilerOptions": {
"target": "ES2020",
"module": "commonjs",
"outDir": "./dist",
"rootDir": "./src",
"strict": true
},
"include": ["src"]
}| 設定 | 意味 |
|---|---|
target | 変換後のJavaScriptのバージョン |
module | 変換後のモジュール形式（commonjs や nodenext など） |
outDir | 変換後のファイルの出力先 |
rootDir | ソースファイルのルートディレクトリ |
strict | 型チェックを厳しくする設定のまとめ |
include | コンパイル対象のファイル・ディレクトリ |
module は実行環境（Node.jsのバージョンや使うバンドラ）によって最適な値が変わるため、まずは公式ドキュメントの説明を確認してください。
targetとは：変換後のJavaScriptのバージョン
target は、TypeScriptをどのバージョンのJavaScriptに変換するかを決める設定です。同じコードでも、target によって出力が変わります。たとえば、テンプレートリテラルを使ったコードを変換すると次のようになります。
// 元のTypeScript
const f = (x: number) => `v=${x}`;
// target: ES2020 のときの出力
const f = (x) => `v=${x}`;
// target: ES5 のときの出力
var f = function (x) { return "v=".concat(x); };target を古くすると、新しい構文が古い書き方に置き換わります。また、古すぎる target では使えない構文もあります。たとえばクラスのプライベートフィールド（#p）を ES5 で使うと、次のエラーになります。
error TS18028: Private identifiers are only available when targeting ECMAScript 2015 and higher.target の選び方は、コードを動かす環境が対応している最新のバージョンが基本です。迷う場合は、最近のNode.jsやブラウザなら ES2020 以上を指定しておけば問題になることはほとんどありません。
outDir・rootDirでファイルを整理する
outDir は出力先、rootDir はソースのルートです。次のように設定すると、src の中のファイルが dist に変換されます。
プロジェクト/
├─ src/
│ └─ index.ts ← 書くのはここ
├─ dist/
│ └─ index.js ← tsc が出力する
└─ tsconfig.jsonこの構成にしておくと、ソース（.ts）と変換後のファイル（.js）が混ざらず、dist をまるごと .gitignore に入れられます。
include・excludeでコンパイル対象を決める
include には、コンパイルしたいディレクトリやファイルを書きます。exclude を使うと、その中から除外するものを指定できます。
{
"compilerOptions": {
"outDir": "./dist",
"rootDir": "./src"
},
"include": ["src"],
"exclude": ["node_modules", "dist"]
}include を書かない場合は、tsconfig.jsonがあるディレクトリ以下のTypeScriptファイルがすべて対象になります。意図しないファイルを変換しないよう、include は書いておくのがおすすめです。
strictとは：型チェックの厳しさ
strict: true にすると、型チェックに関する厳しい設定がまとめて有効になります。たとえば、次のコードは strict が false だとエラーになりませんが、true にすると2か所でエラーになります。
function greet(name) {
return "Hello " + name;
}
let user: string = null;a.ts(1,16): error TS7006: Parameter 'name' implicitly has an 'any' type.
a.ts(4,5): error TS2322: Type 'null' is not assignable to type 'string'.引数の型を書き忘れる（暗黙の any）ミスや、null を入れてしまうミスを、コンパイル時に見つけられます。新しく始めるプロジェクトでは、最初から strict: true にしておくのがおすすめです。
tsconfig.jsonでよくあるエラーと対処
1. error TS18003: No inputs were found in config file
include に指定した場所に .ts ファイルがないときのエラーです。include のパスが正しいか、ファイルが src の中にあるかを確認してください。
error TS18003: No inputs were found in config file '.../tsconfig.json'. Specified 'include' paths were '["src"]' and 'exclude' paths were '[]'.2. error TS6059: File … is not under ‘rootDir’
rootDir の外にあるファイルが、コンパイル対象に含まれているときのエラーです。include と rootDir の範囲をそろえてください。
error TS6059: File '.../lib/b.ts' is not under 'rootDir' '.../src'. 'rootDir' is expected to contain all source files.3. error TS18028: Private identifiers are only available when targeting ECMAScript 2015 and higher.
target が古すぎるのが原因です。ES2015 以上に変更してください。
4. .tsxを使うのにエラーが出る
JSXを書くには、jsx の設定が必要です。詳しくはこちらで解説しています。
よくある質問
Q. tsconfig.jsonは必ず作らないといけませんか？
A. 1ファイルを試すだけなら不要です。複数のファイルを扱う、設定を固定したい、といった場合は作っておくと楽になります。
Q. tsc --initで生成された設定はそのまま使ってよいですか？
A. 動作はしますが、include や outDir などを自分のプロジェクトに合わせて見直すのがおすすめです。生成される内容は、TypeScriptのバージョンによっても違います。
Q. targetは何を選べばよいですか？
A. コードを動かす環境が対応している最新のバージョンが基本です。迷ったら ES2020 以上にしておけば、まず問題になりません。
Q. tsc src/index.tsと実行すると、tsconfig.jsonの設定は効きますか？
A. 効きません。ファイル名を指定すると、tsconfig.jsonは読み込まれないため、設定を使いたいときは tsc だけで実行してください。
まとめ：tsconfig.jsonとは何かのおさらい
- tsconfig.jsonは、コンパイル設定をプロジェクト単位でまとめるファイル
tsc --initで作れる。中身はバージョンによって違うので、自分のプロジェクトに合わせて見直す- 最初に覚えるのは
target・outDir・rootDir・strict（＋include） - ファイル名を指定した
tsc index.tsでは、tsconfig.jsonは使われない - 新しいプロジェクトは、最初から
strict: trueがおすすめ
型の書き方を整理したい方は、こちらもあわせてどうぞ。
にほんブログ村へ
