⚡
[Next.js] tsconfig.jsonの設定
はじめに
この記事では、tsconfig.jsonの設定方法 をまとめております。
参考資料
1. tsconfig.jsonの作成
下記コマンドでデフォルトで作成する事が出来ますが、PJ作成時に作成されます。
tsc --init
2. tsconfig.jsonの更新
下記内容ようにファイルを更新します。
tsconfig.json
{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true,
"baseUrl": "src"
},
"include": [
"next-env.d.ts",
"src/**/*.ts",
"src/**/*.tsx"
],
"exclude": [
"node_modules"
]
}
tsconfig.jsonとは
TypeScriptプロジェクトの設定ファイルであり、 TypeScriptコンパイラに対してプロジェクトのビルド方法やコンパイルオプションを指示するためのものです
項目 | 役割 |
---|---|
tacompilerOptionsget | TypeScript コンパイラの設定が含まれるセクションです。 |
target | コンパイルされる JavaScript のバージョンを指定します。この場合は ECMAScript 5 (es5) |
lib | コンパイル時に使用可能なライブラリのリストです。dom、dom.iterable、esnext が含まれています。 |
allowJs | JavaScript ファイルもコンパイルの対象とするかどうかを指定します。 |
skipLibCheck | ライブラリの型チェックをスキップするかどうかを指定します。 |
strict | 厳格な型チェックを有効にします。 |
forceConsistentCasingInFileNames | ファイル名の一貫性を強制するかどうかを指定します。 |
noEmit | 実際に JavaScript ファイルを生成しないようにします。 |
esModuleInterop | CommonJS モジュールと ES6 モジュールの相互運用性を改善するための設定です。 |
module | モジュールのコード生成方式を指定します。ここでは ES6 モジュールを指定しています。 |
moduleResolution | モジュール解決の方法を指定します。ここでは Node.js の方式を使用しています。 |
resolveJsonModule | JSON ファイルを import 文で読み込むことを可能にするかどうかを指定します。 |
isolatedModules | ファイルごとに個別の型チェックとコンパイルを行うかどうかを指定します。 |
jsx | JSX ファイルの扱いを指定します。ここでは "preserve" としています。 |
incremental | 増分ビルドを有効にするかどうかを指定します。 |
baseUrl | 増分ビルドを有効にするかどうかを指定します。 |
include | コンパイルの対象となるファイルやディレクトリのリストです。next-env.d.ts、src//.ts、src//.tsx が含まれています。 |
exclude | コンパイルから除外するファイルやディレクトリのリストです。ここでは "node_modules" が除外されています。 |
Discussion