TypeScriptの設定ファイル「tsconfig」。最初に知っておきたい設定をピックアップ!
- 投稿日:2021.10.28 最終更新日:2023.08.08
- TypeScript
- サンプルコード
この記事では、TypeScriptのプロジェクトに必ず存在している設定ファイル「tsconfig」について説明する。
近年、Webアプリケーションがソフトウェア開発のメインストリームになるとともに注目が高まっているプログラミング言語「TypeScript」。
TypeScriptはコンパイルの際にJavaScriptファイルに変換されるが、その挙動を定義するためのファイルには実に様々なオプションが存在する。
コンパイルの効率を高めたり、エラーを回避したりするためにはtsconfigについてぜひ知っておいてほしい。
TypeScriptのコンパイルの仕組み
tsconfigファイルについて話す前に、TypeScriptのコンパイルの流れについて確認しておこう。
TypeScriptで書かれたコードはTypeScript Compiler(TSC)によってJavaScriptに変換されてからブラウザやnode.jsで実行される。
TypeScript CompilerはTypeScriptで書かれたコマンドラインアプリケーションで、実行するにはnode.jsがインストールされている必要がある。
TypeScriptからJavaScriptへの変換はtsconfig.jsonの設定に基づきおこなわれる。
変換が行われる前にはタイプチェッカーにより型の安全性がチェックされ、エラーが検出された場合は変換が中断される。
TypeScriptのコード内で指定したデータ型はこのタイプチェックのために使用され、変換されたJavaScriptのコードには出力されない。
tsconfigを作成する
tsconfigの設定内容を説明する前にtsconfigファイルの作成方法について説明したい。
設定を1から書く場合はtsconfig.jsonという名前のファイルをルート直下に作成し、そこに記述していってもいいが以下のコマンドを使えばすべてのオプションの説明が記述されたファイルを作成することができる。
tsc --init
AngularのようにTypeScriptが標準の言語となっているプロジェクトでは、tsconfigファイルはプロジェクトを作成した際に自動で作成されるはずだ。
tsconfigの設定内容
では、tsconfigで設定できる内容を確認していこう。
tsConfig.jsonがサポートしているオプションはたくさんある。
詳細を知りたい人は公式サイトのリファレンスページを見てほしい。
https://www.typescriptlang.org/tsconfig
compilerOptions
compilerOptionsでは基本的なコンパイラの設定をおこなう。
target
JavaScript(正式名称ECMAScript)のバージョンを指定する。
バージョンは次のうちから指定できる。
ES2015, ES2016, ES2017, ES2018, ES2019, ES2020, ESNext
lib
コンパイルの際に含めるライブラリを指定する。
ここではライブラリはどういった機能を使用しているかコンパイラに知らせる意味で使われる。
このオプションを指定しなかった場合は、targetとして指定されているECMAScriptごとに標準となっているライブラリが適用される。
module
コンパイルの際に使用されるモジュールシステムを指定する。
ここで指定したモジュールが出力されるJavaScriptのSyntaxに影響する。
「commonjs」「ES2015」などがよく使われる。
outDir
出力されたJavaScriptファイルを含めるフォルダを指定する。
strict
このオプションをtrueに設定するとタイプチェックにまつわるすべてのオプションが有効となる。
タイプチェックの種類には「strictNullChecks」「strictFunctionTypes」「strictPropertyInitialization」などが存在し、それぞれ個別にオプションを指定することもできる。
include & exclude
includeとexcludeオプションでは、コンパイルの対象となるフォルダの範囲を指定する。
includeに記述されたフォルダはコンパイルの対象となり、excludeに記述されたフォルダはコンパイルの対象から除外される。
コマンドラインからオプションを指定する
先の章で紹介したオプションはコマンドラインから変更することもできる。
詳しくは公式のドキュメントを参考にしてほしい。
https://www.typescriptlang.org/docs/handbook/compiler-options-in-msbuild.html