よく使いそうなTypeScriptのtsconfig.jsonオプションのまとめ

TypeScript
よく使いそうなTypeScriptのtsconfig.jsonオプションのまとめ
Memo

よく使いそうなTypeScriptのtsconfig.jsonオプションをまとめました。

経緯

Next.js10系の環境を新しく構築しているのですが
その際にtsconfigを設定し色々と調べたので設定内容を整理しています。

環境

  • typescript 4.3.3

tsconfig.json

compilerOptions

コンパイルする際のオプションをここへ記述します。

tsconfig.json
{ "compilerOptions": {} }

target

出力する ECMAScript のバージョンを指定します。

設定項目

  • esnext
  • es3
  • es5
  • 20XX

設定の例

tsconfig.json
target: "esnext",

module

モジュールの方式

設定項目

  • commonjs
  • amd
  • system
  • es6, es2021, esnext
  • none

commonjs

CommonJSと呼ばれる規格です。
Node.jsなどサーバサイドコードで一般的に利用します。

amd

Asynchronous Module Definition (AMD)と呼ばれる規格です。
クライアントサイドコードで一般的に利用します。

system

SystemJSとESモジュールローダーに対応しています。
systemjs

umd

Universal Module Definition (UMD)と呼ばれる規格です。
AMDとCommonJSの両方をサポートしています。

設定の例

tsconfig.json
module: "esnext",
参考

tsconfigのmoduleの設定値の違い: commonjs, amd, system, umd, es6, es2015, esnext, none

jsx

"preserve"オプションを使ってreact形式の出力を無効にすることができます。

設定項目

  • preserve
  • react-native
  • react

設定の例

tsconfig.json
jsx: "preserve",

noImplicitAny

暗黙的にanyになる値をエラーにします。

設定項目

  • true
  • false

設定の例

tsconfig.json
noImplicitAny: true,

suppressImplicitAnyIndexErrors

有効にするとオブジェクトへインデックスアクセスしたときの暗黙的 any についてのエラーが抑止することができます。

const obj = { x: 10 };
console.log(obj["foo"]); // エラー

設定項目

  • true
  • false

設定の例

tsconfig.json
suppressImplicitAnyIndexErrors: true,

outDir

出力先ディレクトリの指定します。 何も指定しない場合はコンパイルしたtsファイルと同じディレクトリに作成されます。

設定の例

tsconfig.json
"outDir": "./.dist",

lib

コンパイルする際に使用する組み込みライブラリを指定します。
基本的にはtargetで指定しているjsのバージョンに含まれているものは暗黙的に指定されます。

設定項目

  • esnext
  • es3
  • es5
  • 20XX

設定の例

tsconfig.json
"lib": ["dom", "es2021"],

moduleResolution

tscのモジュールの名前解決の方法を指定します。

デフォルト値

classic

moduleの指定値がAMD・System・ES2015のいずれかである場合

node

それ以外の場合

設定の例

tsconfig.json
"moduleResolution": "node",

allowJs

JavaScript(.js,.jsx)ファイルをコンパイルの対象へ含めるかの設定になります。
デフォルトだとts,tsxファイルのみコンパイルされます。

設定項目

  • true
  • false

設定の例

tsconfig.json
"allowJs": true,

sourceMap

ソースマップファイルの生成を有効化します。

設定項目

  • true
  • false

設定の例

tsconfig.json
"sourceMap": false,

noUnusedLocals

未使用のローカル変数がエラーになります。

設定項目

  • true
  • false

設定の例

tsconfig.json
"noUnusedLocals": true,

noUnusedParameters

設定すると利用されていない関数の引数がエラーになります。

設定項目

  • true
  • false

設定の例

tsconfig.json
"noUnusedParameters": true,

preserveConstEnums

コード生成時にconst enumの定義を取り除かないようにします。

設定項目

  • true
  • false

設定の例

tsconfig.json
"preserveConstEnums": true,

emitDecoratorMetadata

reflect-metadataモジュールとともに動作するデコレータのメタ情報を出力するための実験的なサポートを有効化します。

設定項目

  • true
  • false

設定の例

tsconfig.json
"emitDecoratorMetadata": true,

experimentalDecorators

デコレータの実験的なサポートを有効化します。 これは TC39 の標準化プロセスでは stage 2 の機能です。

設定項目

  • true
  • false

設定の例

tsconfig.json
"experimentalDecorators": true,

strictNullChecks

strictNullChecksがfalseのとき、nullとundefinedは言語により事実上無視されます。
これは実行時の予期しないエラーの原因となります。

strictNullChecksがtrueのとき、nullとundefinedはそれ自身に明示的な型が与えられ、具体的な値を期待して利用しようとした場合にエラーとなります。

設定項目

  • true
  • false

設定の例

tsconfig.json
"strictNullChecks": false,

traceResolution

モジュールのファイルの解決のプロセスを表示させるかどうか設定します。
あるモジュールがコンパイル対象に含まれていない理由をデバッグするためなどに用います。

設定項目

  • true
  • false

設定の例

tsconfig.json
"traceResolution": false,

declaration

プロジェクト内のすべての TypeScript ファイルと JavaScript ファイルについて、d.tsファイルを生成します。

設定項目

  • true
  • false

設定の例

tsconfig.json
"declaration": false,

noImplicitReturns

TypeScript は関数内のすべてのコードパスについて、値を返却していることをチェックします。

設定項目

  • true
  • false

設定の例

tsconfig.json
"noImplicitReturns": false,

removeComments

「/*!」で始まるコメント以外を除去します。

設定項目

  • true
  • false

設定の例

tsconfig.json
"removeComments": true,

skipLibCheck

型定義ファイルのチェックをスキップします。

設定項目

  • true
  • false

設定の例

tsconfig.json
"skipLibCheck": true,

allowSyntheticDefaultImports

default export の指定がされていなモジュールの default import をエラーにします。

設定項目

  • true
  • false

設定の例

tsconfig.json
"allowSyntheticDefaultImports": true,

strict

指定すると下記のオプションが全てtrueになります。

  • --noImplicitAny
  • --noImplicitThis
  • --alwaysStrict
  • --strictBindCallApply
  • --strictNullChecks
  • --strictFunctionTypes
  • --strictPropertyInitialization

設定項目

  • true
  • false

設定の例

tsconfig.json
"strict": true,

forceConsistentCasingInFileNames

大文字小文字を区別して参照を解決するようするかどうかの指定になります。
Windows 向けのオプションになります。

設定項目

  • true
  • false

設定の例

tsconfig.json
"forceConsistentCasingInFileNames": true,

noEmit

JavaScript ソースコード、ソースマップ、型定義のファイルを出力しないようにします。

設定項目

  • true
  • false

設定の例

tsconfig.json
"noEmit": true,

esModuleInterop

すべてのインポートへ Namespace オブジェクトを生成しCommonJS と ES Modules 間で相互運用可能なコードを出力します。

設定項目

  • true
  • false

設定の例

tsconfig.json
"esModuleInterop": true,

resolveJsonModule

.json拡張子のファイルをモジュールとしてインポートできるようにします。
このオプションは、import時に静的な JSON の構造から型を生成します。

設定項目

  • true
  • false

設定の例

tsconfig.json
"resolveJsonModule": true,

isolatedModules

単一ファイルのトランスパイル処理で正しく解釈できないコードが書かれたときに、TypeScript が警告を与えるように設定します。

設定項目

  • true
  • false

設定の例

tsconfig.json
"isolatedModules": true,

baseUrl

モジュール名を解決するための基点となるディレクトリを設定できます。

baseUrl
├── ex.ts
├── hello
│   └── world.ts
└── tsconfig.json

設定の例

tsconfig.json
"baseUrl": ".",

typeRoots

型定義ファイルのインクルード先を指定します。

デフォルトでは、表示されているすべての”@types“パッケージがコンパイル時にインクルードされます。

設定の例

tsconfig.json
"typeRoots": ["./vendor/types"],

paths

baseUrlからの相対的な検索場所にインポートを再マッピングするエントリです。

"paths"を設定する場合、baseUrlオプションも設定が必要です。

  "baseUrl": ".", 
  "paths": {
    "jquery": ["node_modules/jquery/dist/jquery"] // "baseUrl"からの相対パス
  }

files

コンパイルする対象を直接指定します。

tsconfig.json
{ "files": [ "main.ts", ] }

include

コンパイルする対象をまとめて指定します。
excludeに含まれるファイル以外がコンパイル対象になります。

設定の例

ワイルドカード*,?,**/が利用可能

    • 0個以上の文字に一致します(ディレクトリ区切り文字を除く)
  • ? 任意の1文字に一致します(ディレクトリ区切り文字を除く)
  • **/ 任意のサブディレクトリに再帰的に一致します
tsconfig.json
{ "include": [ "./src/**/*", "./@types", ] }

exclude

コンパイルする対象から外すファイルを記述します。

デフォルトの設定

デフォルトで下記のディレクトリは対象となるため設定は不要です。

  • node_modules
  • bower_components
  • jspm_packages
  • outDirオプションで指定しているディレクトリ配下のファイル

設定の例

ワイルドカード*,?,**が利用可能

tsconfig.json
{ "exclude": [ ".dist", ".next" ] }

filesとincludeとexcludeの優先

下記の優先順位で設定が適応されます。

files > exclude > include 

参考文献

TSConfig リファレンス

tsconfig.jsonの全オプションを理解する

終わりに

最後までご覧いただきありがとうございます。
この記事ではよく使いそうなTypeScriptのtsconfig.jsonオプションのまとめについて紹介させていただきました。

これからも皆様の開発に役立つ情報を提供していきたいと考えています。
今後ともよろしくお願いいたします。