T-CREATORよく使いそうなTypeScriptのtsconfig.jsonオプションのまとめ
TypeScript
よく使いそうな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オプションのまとめについて紹介させていただきました。
これからも皆様の開発に役立つ情報を提供していきたいと考えています。
今後ともよろしくお願いいたします。
