参考にさせていただいたページ
はじめに
yarn create next-app --typescript でアプリケーションを作成しました。
生成されたtsconfig.jsonの設定内容について、理解する努力をしようということで読んでみます。
個人的にメモしていくだけなので、私のメモを鵜呑みにせずに公式ドキュメントなどで最新の正しい情報をご確認いただくことをお勧めします。
今日の環境
- Next.js 13.2.2
- typescript 4.9.5
生成されたtsconfig.json
以下のような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,
"paths": {
"@/*": ["./src/*"]
}
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
"exclude": ["node_modules"]
}
compilerOptions
target
https://www.typescriptlang.org/ja/tsconfig#target によると、es3がデフォルト値で、以下の文字列が設定可能なようです。
- es3
- es5
- es6/es2015
- es2016
- es2017
- es2018
- es2019
- es2020
- es2021
- es2022
- esnext
lib
tsconfig.jsonのよく使いそうなオプションを理解する によると、
targetに指定しているjsのバージョンには含まれていない、組み込みライブラリを使用する場合は、libに明示的な指定が必要になります。
とのことです。
allowJs
https://www.typescriptlang.org/ja/tsconfig#allowJs によると、
.ts、.tsxファイルだけでなく、JavaScript ファイルをプロジェクトへインポートできるようにします。
とのことです。
trueなので、.js、.jsxもインポートできるということらしいです。
skipLibCheck
https://www.typescriptlang.org/ja/tsconfig#skipLibCheck によると、
型定義ファイルのチェックをスキップします。
型システムの精度を犠牲にすることで、コンパイル実行時間を削減します。
とのことです。
strict
https://www.typescriptlang.org/ja/tsconfig#strict によると
strictフラグは、プログラムの正しさを強く保証するための幅広い型チェックの挙動を有効化します。 このオプションの有効化は、以降で述べるすべてのstrict モードファミリーオプションの有効化と等価です。 必要に応じて、個別の strict モードファミリーを無効化できます。
今後の TypeScript のバージョンがこのフラグの配下により厳密なチェックを導入するかもしれません。この場合、TypeScript のアップグレードにより、プログラムに新しい種類のエラーが発見されることもあるでしょう。 適切かつ可能な場合、この挙動を無効化するための対応するフラグも追加されます。
とのことです。
forceConsistentCasingInFileNames
https://www.typescriptlang.org/ja/tsconfig#forceConsistentCasingInFileNames によると
このオプションを有効化すると、TypeScript はプログラムがディスク上の大文字小文字と異なるファイルをインクルードしようとした場合にエラーを発生させます。
noEmit
https://www.typescriptlang.org/ja/tsconfig#noEmit によると
JavaScript ソースコード、ソースマップ、型定義のファイルを出力しないようにします。
これにより、Babelやswcなどの TypeScript ファイルを JavaScript 環境内で実行可能なファイルへ変換するための別のツールを追加できます。
TypeScript をエディター統合やソースコードの型チェックツールとして利用できるようになります。
Next.jsでは、tscは型チェックだけをしてコンパイル結果を出力せず、コンパイル結果を出力するのはswcでやるから true の設定になっているということらしいです。
esModuleInterop
https://www.typescriptlang.org/ja/tsconfig#esModuleInterop によると
すべてのインポートに対して Namespace オブジェクトを生成することによって、CommonJS と ES Modules 間で相互運用可能なコードを出力します。
とのことですが、ごく一部だけ抜粋してここにメモしていますので、公式ドキュメントをご確認いただくことを特にお勧めします。
module
公式ドキュメントでは https://www.typescriptlang.org/ja/tsconfig#module の部分がそうなのでしょうかね。
tsconfig.jsonの全オプションを理解する - Qiita によると、
Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'.
とあり、
出力するjsのモジュールの仕組みとして何を使用するかを指定する。
とのことです。
TypeScriptの設定の良し悪し · GitHub によると
誤解しやすいがmoduleは、モジュールをCommonJS, ES Module形式で出力するかなどモジュールの構文のみについてのオプションなので、他のECMAScript構文とは関係ない。webpackやRollupなどの中でTypeScriptを扱っているなら、module: "ESNext" にしておくことでTree Shakingなどの最適化ができるという仕組み。
targetとmoduleを両方 "ESNext" にする状況は普通はないので、そういった設定は避ける。
ということらしいです。
「モジュールの構文のみについてのオプション」であるということを前提に理解しておくとよさそうですね。
moduleResolution
https://www.typescriptlang.org/ja/tsconfig#moduleResolution によると、
モジュール解決の方法を’node’（Node.js）または’classic’（TypeScript pre-1.6）から設定します。おそらく利用する必要はないでしょう。
と記載がありました。
生成されたtsconfig.jsonには 'node' の設定がありました。
resolveJsonModule
https://www.typescriptlang.org/ja/tsconfig#resolveJsonModule によると、
‘.json’拡張子のファイルをモジュールとしてインポートできるようにします。Node のプロジェクトで一般的に利用されている手法です。 このオプションは、import時に静的な JSON の構造から型を生成します。
デフォルトでは、TypeScript は JSON ファイルの解決をサポートしていません:
とのことです。
isolatedModules
https://www.typescriptlang.org/ja/tsconfig#isolatedModules によると、
TypeScript を TypeScript コードから JavaScript コードを生成する用途で利用可能な一方、Babelなどの他のトランスパイラの利用も一般的です。 しかし、他のトランスパイラは一度に１ファイルのみを扱うため、全体の型システムの知識に依存したコード変換はできません。 ビルドツールで用いられる TypeScript のts.transpileModuleAPI についても、この制約が課せられます。
この制限は、TypeScript のconst enumやnamespaceのような機能を利用したときに実行時の問題を引き起こします。 isolatedModulesフラグは、単一ファイルのトランスパイル処理で正しく解釈できないコードが書かれたときに、TypeScript が警告を与えるように設定します。
このフラグは、コードの挙動を変更せず、また、TypeScript のチェック・出力プロセスの挙動も変更しません。
とのことで、コード例が公式ドキュメントに記載されているので、公式ドキュメントをご確認いただくことを特にお勧めします。
jsx
https://www.typescriptlang.org/ja/tsconfig#jsx によると、
JSX 構文がどのように JavaScript ファイルに出力されるかを設定します。 .tsxで終わるファイルの JS 出力にのみ影響します。
preserve: JSX を変更せずに.jsxファイルを出力します react: JSX を等価なreact.createElementに変換して.jsファイルを出力します react-native: JSX を変更せずに、.jsファイルを出力します
とのことです。
生成されたtsconfig.jsonには 'preserve' が設定してありました。
incremental
https://www.typescriptlang.org/ja/tsconfig#incremental によると
最新のコンパイルでのプロジェクトグラフ情報をディスクにファイルとして保存するように TypeScript に指示します。 このオプションはコンパイルの出力先として指定されたフォルダに .tsbuildinfo のファイル群を作成します。 これらのファイルはコンパイルされた JavaScript が実行時に利用することはなく、安全に削除できます。このフラグの詳細については3.4 リリースノートで確認できます。
このファイル群の出力先フォルダを設定する場合、tsBuildInfoFileオプションを利用してください。
とのことです。
paths
https://www.typescriptlang.org/ja/tsconfig#paths によると、
baseUrlからの相対的な検索場所にインポートを再マッピングするエントリです。pathsについてより網羅的な記述はハンドブックに記載されています。
とのことです。
yarn create next-app --typescript したときに以下のような選択をしたので
✔ What is your project named? … my-app
✔ Would you like to use ESLint with this project? … No / Yes
✔ Would you like to use src/ directory with this project? … No / Yes
✔ Would you like to use experimental app/ directory with this project? … No / Yes
✔ What import alias would you like configured? … @/*
生成されたtsconfig.jsonには以下の設定がしてありました。baseUrlは設定がないけど、'.' とか './' がデフォルトで設定されているのだろうか？
"paths": {
"@/*": ["./src/*"]
}
include
トップレベルのincludeプロパティです。
https://www.typescriptlang.org/ja/tsconfig#include によると、
プログラムに含めるファイル名またはパターンのリストを指定します。 ファイル名はtsconfig.jsonファイルを含んでいるディレクトリからの相対パスとして解決されます。
生成されたtsconfig.jsonには以下のように設定してありました。
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
exclude
トップレベルのexcludeプロパティです。
includeの解決時にスキップさせるファイル名やパターンのリストを指定します。
重要: excludeはincludeの結果として、どのファイルが含まれるべきかのみに影響を与えます。 excludeに指定されたファイルは、コードでのimportやtypesでのインクルード、/// <reference ディレクティブ、filesリストの指定によって、コードベースの一部となり得ます。
excludeはコードベースに含まれているファイルの読み込みを防ぐための仕組みではありません。include設定の結果を変更するだけです。
生成されたtsconfig.jsonには以下のように設定してありました。
"exclude": ["node_modules"]
includeで設定したpathから除外するということらしいです、
includeせ設定したpathに含まれるファイルからimportしたものについては除外されないとかそういうことが書いてあるようです。
