tsconfig.jsonについての基本的な説明

TypeScriptを使用するプロジェクトではプロジェクトルートにtsconfig.jsonというファイルを作成する。
今回はこのファイルの基本的な役割と何ができるのかを記載していく。

基本的な役割

プロジェクトで使用するTypeScriptに関する様々な設定をすることができるファイル。
ファイル内には様々な設定をすることができ、その種類と内容は常にアップデートされているが、基本的には次の点を押さえておくといいとされている。

• どのファイルをコンパイルすべきか
• コンパイル結果をどのディレクトリに格納するか
• 出力するバージョンのJavaScriptは何にするか

サンプルコード

サンプルコードは次のようになる。

{
    'compilerOptions': {
        'lib': ['es2015'],
        'module': 'commonjs',
        'outDir': 'dist',
        'sourceMap': true,
        'strict': true,
        'target': es2015
    },
    'include': [
        'src'
    ]
}

代表的なオプションの意味

include

TypeScriptのコンパイラがTSファイルを探すフォルダを指定する。

module

TypeScriptのコンパイラがTSコードをどのモジュールシステムにコンパイルするかを指定する。
具体的にはcommonjs, systemjs, es2015などを指定する。

ourDir

生成するJSコードをどのフォルダに格納すべきかを指定する。

strict

コードをチェックする際にその厳格さのレベルを決めるための設定。
strictを指定することによって全てのコードが適切に型付けされていることが強制される。
特に理由がない限り、TypeScriptの最大の特徴である静的型付けを活かすために設定すべき。

target

TypeScriptのコンパイラがTSコードをどのバージョンのJSにコンパイルすべきかを設定する。
具体的にはES5, es2015など。

create-react-appやcreate-next-appを使った場合

2021年10月時の最新バージョンではデフォルトでプロジェクトルートにtsconfig.jsonが作成されている。
必要に応じて中身を修正すればいいといった感じ。

公式

サポートされるオプションの最新の情報はTypeScript公式ドキュメントを参照。
設定できるキーワード名も記載されている。
http://bit.ly/2JWfsgY

参考にした資料

Programming TypeScript: Making Your JavaScript Applications Scale