TypeScriptの設定ファイル「tsconfig」。最初に知っておきたい設定をピックアップ!

TypeScriptの設定ファイル「tsconfig」。最初に知っておきたい設定をピックアップ!

この記事では、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のコードには出力されない。

AST – abstarct syntax tree
typescriptのコードがJavaScritpに変換される前にはabstarct syntax treeという構造データが作成される。ASTはこちらのサイトで見ることができる。https://ts-ast-viewer.com

tsconfigを作成する

tsconfigの設定内容を説明する前にtsconfigファイルの作成方法について説明したい。

設定を1から書く場合はtsconfig.jsonという名前のファイルをルート直下に作成し、そこに記述していってもいいが以下のコマンドを使えばすべてのオプションの説明が記述されたファイルを作成することができる。

tsc --init

tsc –initコマンドで作成したtsconfig.json

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