tsconfig.json（TypeScript構成ファイル）：Dev Basics／Keyword
tsconfig.jsonファイルは、プロジェクトでJavaScriptへのコンパイルが必要となるファイルと、それらのコンパイルオプションなどを指定するファイルだ。
tsconfig.jsonファイルは、TypeScriptを開発言語としたプロジェクトにおいて、アプリのビルド時にJavaScriptへコンパイルする対象となる（プロジェクトに含まれる）TypeScriptファイル（.tsファイル）と、それらをJavaScriptコードへコンパイルする際のコンパイルオプションなどを指定するファイルだ。通常は、プロジェクトのルートディレクトリに配置する。
tsconfig.jsonファイルの基本
通常、tsconfig.jsonファイルはTypeScriptを開発言語としたプロジェクトのルートディレクトリに作成する。tscコマンドでコンパイルを行うときには、プロジェクト内のディレクトリで「tsc」を実行するか、「tsc -p <tsconfig.jsonファイルがあるディレクトリ>」を実行する。前者の場合はカレントディレクトリにtsconfig.jsonファイルがなければ、これを探して親ディレクトリを走査してくれる。
最小限のtsconfig.jsonファイルは以下のようになる。
{
}
この場合、プロジェクトのルートディレクトリ以下にある全ての.tsファイルがコンパイル対象となる。tscコマンドに--initオプションを指定して、ひな型ファイルを作成してもよい。
> tsc --init
message TS6071: Successfully created a tsconfig.json file.
> more tsconfig.json
{
"compilerOptions": {
"module": "commonjs",
"target": "es3",
"noImplicitAny": false,
"outDir": "built",
"rootDir": ".",
"sourceMap": false
},
"exclude": [
"node_modules"
]
}
以下では、このファイルの内容について見ていく。
compilerOptionsプロパティ
このプロパティには、tscコマンド実行時のコマンドライン引数を指定する。例えば、上のコードではmoduleプロパティの値が「commonjs」となっている。この場合、このコマンドライン引数なしでtscコマンドを実行した場合でも、「--module commonjs」が指定されたものとしてコンパイルが実行される（コマンドラインで直接指定すれば、この設定を上書き可能）。
上記のtsconfig.jsonファイルで指定されているオプションは次のような意味を持つ。
- moduleオプション： 生成するJavaScriptモジュールの形式
- targetオプション： 生成するJavaScriptコードのバージョン
- noImplicitAnyオプション： trueに設定すると、TypeScriptの型推測でAny型となった式／宣言があったときにはエラーメッセージが生成されるようになる
- outDirオプション： 出力先のディレクトリ
- rootDirオプション： プロジェクトのルートディレクトリ（tscコマンドに渡すTypeScriptコードを含んだルートディレクトリ）
- sourceMapオプション： trueに設定すると、対応するソースマップファイル（.mapファイル。TypeScriptコードとそこから生成されたJavaScriptコードとの対応関係を記述したファイル）が生成されるようになる
次にexcludeプロパティとfilesプロパティについて見ていこう。
excludeプロパティとfilesプロパティ
excludeプロパティにはtscコマンドによるコンパイルの対象外となるファイルまたはディレクトリを指定する。対して、filesプロパティにはコンパイル対象のファイルを列挙していく（excludeプロパティとは相互排他的に使うことが推奨されている）。
ただし、filesプロパティに指定したファイル内で「filesプロパティには指定されていないファイル」を参照していた場合には、そのファイルもコンパイルの対象となる。
例えば、以下のようなTypeScriptコードがあったとする。Bar.tsファイルではFoo.tsファイルが公開するHello関数を利用している。
// Foo.tsファイル
export function Hello(s) {
return "Hello " + s;
}
// Bar.tsファイル
import {Hello} from './Foo';
console.log(Hello('World'));
このときにtsconfig.jsonファイルで以下のような設定をすると、Foo.tsファイルもコンパイルされる。
{
…… 省略 ……
"files": [
"Bar.ts"
]
}
tsconfig.jsonファイルを使うと、ファイルの依存関係を自動的に判断して必要なファイルをコンパイルしてくれるので、必要最最低限なファイルだけをここに記述すればよくなる。
また、tsconfig.jsonファイルによりプロジェクトを構成する.tsファイルが決定されるため、依存するファイルを「/// <reference path="..." />」形式で指定するレファレンスコメントが不要になるのが、tsconfig.jsonの大きなメリットといえる。
ただし、filesプロパティではディレクトリを指定したり、ワイルドカードを指定したりして複数のファイルをまとめて指定することはできないのは現時点での短所だ。
最後に、tsconfig.jsonファイルではcompileOnSaveオプションも指定できる。これはファイルが保存されたらコンパイルを行うようにIDEやテキストエディタに指示をするものだ。
tsconfig.jsonファイルを使うと、プロジェクトに含まれるTypeScriptファイルと、それらのコンパイルオプションを一括して指定できる。これにより、レファレンスコメントを記述したり、tscコマンドにいちいちコンパイルオプションを指定したりする必要がなくなる。また、他者にファイルを配布する場合にもプロジェクトの構成やコンパイル方法が明示されたドキュメントとして重宝するはずだ。TypeScriptを使うのであれば活用したい。
参考資料
- tsconfig.json： マイクロソフトによるtsconfig.jsonファイルの概要説明
- Compiler Options： tscコマンドに渡せるコマンドラインオプションの説明
- TypeScript の開発環境構築と周辺ツールの紹介： わかめまさひろ氏によるTypeScript入門連載。tsconfig.jsonファイルについても詳しく説明されている
Copyright© Digital Advantage Corp. All Rights Reserved.