tsconfig.jsonってなんだ？
書く理由
業務でTypeScriptを使うにあたり、深いところまで理解したくなった
今まではよく考えずtsconfig.jsonを作成していたが、理解して記述できるようになりたい。
tsconfigとは
結論:TSファイルをJSファイルにコンパイルするための設定ファイル
tscコマンドを実行する際に、TSコンパイラはtsconfg.jsonを探しに行く
順番はこう
1. カレントディレクトリ
2. 上位ディレクトリ
見つかったtsconfig.jsonの設定情報をもとに、コンパイルを実行する
なんで、ないとコンパイルできない。
設定項目は多岐にわたるみたい。
特にcompilerOptionsが重要っぽい
指定する主要なものを調べてみる
以下のコードはNode.js向けのtsconfg.jsonのcompilerOptionsを出力してとGPTに言ったら出力された
1つのプロパティずつみていく
Nodeのversionは24.1.0を想定
code:tsconfig.json
// tsconfig.json
{
"compilerOptions": {
"target": "ES2022", // Nodeの対応構文に揃える
"module": "NodeNext", // NodeのESM解決
"moduleResolution": "NodeNext",
"rootDir": "src",
"outDir": "dist",
"strict": true,
"skipLibCheck": true,
"esModuleInterop": true,
"resolveJsonModule": true,
"verbatimModuleSyntax": true, // import/exportをそのまま出力（ESM向け）
"noUnusedLocals": true,
"noUnusedParameters": true,
// importエイリアス（任意）
// "baseUrl": ".",
// "paths": { "@/*": "src/*" }
},
"include": "src"
}
target
コンパイルして変換されたJSのバージョンを指定する。
24.1.0だと、ES2024が推薦されている。
このGitHubリポジトリで確認できる。
https://github.com/microsoft/TypeScript/wiki/Node-Target-Mapping
module
NodeのESMを解決する。
どういう意味？
ESMとは
ESModulesの略
更にECMAScriptModulesの略
ECMAScriptとはECMAっていう団体によって標準化されたJavaScriptの仕様
ES2024などと指定するとimport構文が使える
TSのバージョンは今回5.9以上だったのでNodeNextではなくES2024を採用。
moduleResolution
インポートされたファイルの探し方を指定する
詳しくは省く。どうやら最近のNodeならば基本的にNodeNextを指定するみたいだから
rootDir
コンパイル後に出力させたいソースのルートディレクトリを指定。
指定した配下のソースがoutDirに出力される。
案件によってディレクトリ名はまちまちなので気をつけたい。
outDir
tsからjsのコンパイルした後、どのディレクトリに出力するかを指定する。
まぁ基本distだと思うけどなぁ。
strict
厳密モードをONにするかどうか。
基本的にTSを使うってことは堅牢にしたいはずだから、基本はONでよさそう。
nullとundefinedを別として扱ったりするようになる。
skipLibCheck
node_modules配下のd.tsの型チェックをスキップするかどうか。
基本はチェックしないみたい。理由はエラーがよく発生するから。
ライブラリだし、気にしなくて良くねとの考えみたい。
esModuleInterop
ESMのimportで自然にcommonJSを読み込めるようにする設定。
特に理由がなければtrueで良い
基本、この指定はするみたいだ
resolveJsonModule
import文で.jsonファイルを読み込めるようにする設定。
TSが.jsonをモジュールとして使えるみたい。
verbatimModuleSyntax
基本はtrue
import/export文章を、JSの変換時に変更しないようにする設定。
falseだと変わっちゃうっぽいね。
noUnusedparameters
使われていない引数を禁止する
code:ts
function add(n1: number, n2: number, n3: number): number {
return n1 + n2;
}
trueだとn3が使われてないからエラーを出してくれる。
基本trueにしたいよなぁと思っちゃう。
noUnusedLocals
使われていない変数を禁止する
code:ts
function add(n1: number, n2: number): number {
const message: string = the sum is ${n1 + n2};
return n1 + n2;
}
このコードだとmessageを関数内で利用してないからエラーを吐いてくれる。
当然trueにしたいね。
include
開発対象として読み込むソースファイルを指定する。
今回はsrcディレクトリ内のファイルを指定していることになる。
応用で、複数のtsconfigを使ってビルド用、テスト用などとtsconfigを分けて開発することもある。gptは普通と言っているが・・・多分あんまないね。