tsconfig.jsonとは
tsconfig.jsonとは、TypeScriptのコンパイル方法をプロジェクト単位でまとめて設定するファイルです。このファイルを用意しておくことで、ファイルごとにコマンドのオプションを指定する手間がなくなります。
まだTypeScriptの環境構築が済んでいない場合は、先にこちらの記事を読んでおくとスムーズです。
なぜtsconfig.jsonが必要なのか
前回、1つのファイルをコンパイルする方法を紹介しました。
tsc index.tsしかし実際の開発では、ファイルが1つだけということはほとんどありません。複数のファイルをまとめてコンパイルしたい場合や、細かい設定（型チェックの厳しさ、出力先フォルダなど）を毎回コマンドに書くのは現実的ではありません。tsconfig.jsonに設定をまとめておけば、tscとだけ打つだけで、その設定に沿ってコンパイルしてくれるようになります。
tsc –initで作成する方法
tsconfig.jsonは手書きで作ることもできますが、コマンドで自動生成するのが簡単です。プロジェクトのフォルダで以下を実行します。
tsc --init実行すると、コメント付きのtsconfig.jsonが生成されます。設定項目が大量に並んでいて最初は圧倒されますが、初心者のうちに触る項目はごく一部です。
最低限おさえておきたい設定項目
数ある設定の中でも、まずは次の4つを押さえておけば十分です。
{
"compilerOptions": {
"target": "ES2020",
"outDir": "./dist",
"rootDir": "./src",
"strict": true
}
}targetとは：変換後のJavaScriptのバージョン
targetは、コンパイル後にどのバージョンのJavaScriptとして出力するかを指定します。古いブラウザにも対応させたい場合は古めのバージョンを、モダンな環境だけを想定するなら新しめのバージョンを指定します。迷ったら、まずはある程度新しいバージョン（ES2020前後）を指定しておけば問題ありません。
outDir・rootDirでファイルを整理する
この2つは、ファイルの置き場所を整理するための設定です。
- rootDir：自分が書く.tsファイルを置くフォルダ（例：src）
- outDir：コンパイル後の.jsファイルが出力されるフォルダ（例：dist）
これを設定しておくと、書いたコードと変換後のコードが別フォルダに分かれるため、プロジェクトの中身が整理しやすくなります。設定後は、tscとだけ打てば、srcフォルダの中身がまとめてコンパイルされ、distフォルダに出力されます。
tscstrictとは：型チェックの厳しさ
strictは、型チェックをどれだけ厳しくするかを一括で決める設定です。詳しくはこちらの記事でも紹介していますが、実務のプロジェクトはオンが前提になっていることが多いため、学習中からオンにしておくのがおすすめです。
tsconfig.jsonがあると何が変わるか
tsconfig.jsonを作る前と後で、コンパイルの手間が大きく変わります。
| 状態 | コンパイル方法 |
|---|---|
| tsconfig.jsonなし | ファイルごとにtsc index.tsのように指定 |
| tsconfig.jsonあり | tscだけで、設定に沿ってプロジェクト全体をコンパイル |
よくあるエラー
tsc --init
// error TS5055: Cannot write file '...' because it would overwrite input file.これは、outDirとrootDirの設定が正しくなく、出力先と入力元が重なってしまっているときに起きるエラーです。rootDirとoutDirに、それぞれ別のフォルダ名を指定できているか確認してみてください。
よくある質問
Q. tsconfig.jsonは必ず作らないといけませんか？
A. 1ファイルだけの学習用コードなら無くても動きますが、複数ファイルを扱うプロジェクトでは基本的に作成します。
Q. tsc –initで生成された設定は、そのまま使ってもいいですか？
A. 動作はしますが、outDir・rootDir・strictあたりは、プロジェクトに合わせて自分で見直すのがおすすめです。
Q. targetは何を選べばいいですか？
A. 特別な事情がなければ、比較的新しいバージョン（ES2020前後）を選んでおけば、学習段階では困りません。
まとめ
- tsconfig.jsonは、コンパイルの設定をプロジェクト単位でまとめるファイル
tsc --initで自動生成できる- 最初は
target・outDir・rootDir・strictの4つを押さえれば十分 - 設定しておけば、
tscと打つだけでプロジェクト全体をコンパイルできる
公式ドキュメントにも、設定項目の一覧がまとまっています。
▶ TypeScript公式ドキュメント：tsconfig Reference
にほんブログ村へ
