TypeScriptのcompilerOptionsを完全解説！初心者向けおすすめ設定ガイド
生徒
「TypeScriptを使うときに、tsconfig.jsonというファイルがあるって聞いたんですけど、どう設定すればいいんですか？」
先生
「tsconfig.jsonは、TypeScriptのコンパイル設定を行うファイルです。特にcompilerOptionsという部分で、細かい設定ができますよ。」
生徒
「compilerOptionsって何ですか？どんな設定があるんでしょうか？」
先生
「それでは、よく使うcompilerOptionsの設定項目とおすすめの設定方法を見ていきましょう！」
compilerOptionsとは？
compilerOptionsとは？" onerror="this.onerror=null; this.src='/img/view/java-exception-introduce.jpg';">
TypeScriptのプロジェクトでは、tsconfig.jsonというファイルを使ってコンパイラの動作を設定します。その中のcompilerOptionsは、TypeScriptをJavaScriptに変換する際の詳細なルールを決める重要な部分です。
例えるなら、料理をするときのレシピのようなものです。どのくらいの温度で、どのくらいの時間調理するか、といった細かい指示を書くことで、思い通りの仕上がりになります。compilerOptionsも同じように、TypeScriptコードをどのように変換するかを細かく指定できます。
設定ファイルの基本的な構造は以下のようになります。
{
"compilerOptions": {
// ここに各種設定を記述します
}
}
よく使うcompilerOptionsの設定項目
よく使うcompilerOptionsの設定項目" onerror="this.onerror=null; this.src='/img/view/java-exception-introduce.jpg';">
target（ターゲット）
targetは、TypeScriptをどのバージョンのJavaScriptに変換するかを指定します。古いブラウザでも動くようにしたい場合は、古いバージョンを指定します。
{
"compilerOptions": {
"target": "ES2020"
}
}
主な選択肢：
ES5：古いブラウザでも動作する形式ES6またはES2015：モダンな機能が使える形式ES2020、ES2021：より新しい機能に対応ESNext：最新の機能すべてに対応
module（モジュール）
moduleは、モジュールシステムの種類を指定します。モジュールシステムとは、プログラムを複数のファイルに分けて管理する仕組みのことです。
{
"compilerOptions": {
"module": "commonjs"
}
}
主な選択肢：
commonjs：Node.jsで使われる形式es2015またはesnext：ブラウザ向けの形式amd：古いブラウザ向けの形式
strict（厳格モード）
strictは、TypeScriptの型チェックを厳しくするかどうかを決める設定です。これをtrueにすると、バグを未然に防ぎやすくなります。
{
"compilerOptions": {
"strict": true
}
}
この設定を有効にすると、以下のような厳格なチェックが自動的に適用されます。
- 変数の型を明確に指定する必要がある
- nullやundefinedの扱いが厳しくなる
- 関数のthisの型を明示する必要がある
outDir（出力ディレクトリ）
outDirは、コンパイル後のJavaScriptファイルをどのフォルダに保存するかを指定します。
{
"compilerOptions": {
"outDir": "./dist"
}
}
この例では、コンパイルされたファイルがdistというフォルダに保存されます。元のTypeScriptファイルと分けて管理できるので、プロジェクトが整理しやすくなります。
rootDir（ルートディレクトリ）
rootDirは、TypeScriptのソースコードがどこにあるかを指定します。
{
"compilerOptions": {
"rootDir": "./src"
}
}
この設定により、srcフォルダ内のTypeScriptファイルがコンパイルの対象になります。
esModuleInterop（モジュール相互運用）
esModuleInteropは、異なるモジュールシステム間での互換性を向上させる設定です。
{
"compilerOptions": {
"esModuleInterop": true
}
}
この設定をtrueにすることで、外部ライブラリをより簡単にインポートできるようになります。特にNode.jsのライブラリを使う場合に便利です。
skipLibCheck（ライブラリチェックのスキップ）
skipLibCheckは、外部ライブラリの型定義ファイルのチェックをスキップするかどうかを決めます。
{
"compilerOptions": {
"skipLibCheck": true
}
}
これをtrueにすると、コンパイル速度が速くなります。特に大きなプロジェクトでは効果的です。
forceConsistentCasingInFileNames（ファイル名の大文字小文字）
forceConsistentCasingInFileNamesは、ファイル名の大文字と小文字を厳密に区別するかどうかの設定です。
{
"compilerOptions": {
"forceConsistentCasingInFileNames": true
}
}
Windowsでは大文字と小文字が区別されませんが、LinuxやMacでは区別されます。この設定をtrueにすることで、どの環境でも同じように動作するコードが書けます。
resolveJsonModule（JSONモジュールの読み込み）
resolveJsonModuleは、JSONファイルを直接インポートできるようにする設定です。
{
"compilerOptions": {
"resolveJsonModule": true
}
}
この設定を有効にすると、設定ファイルなどのJSONデータをTypeScriptコード内で簡単に読み込めます。
初心者におすすめのcompilerOptions設定
初心者におすすめのcompilerOptions設定" onerror="this.onerror=null; this.src='/img/view/java-exception-introduce.jpg';">
ここまで説明した設定をまとめて、初心者の方におすすめの設定例を紹介します。この設定をそのまま使えば、安全で効率的なTypeScript開発ができます。
{
"compilerOptions": {
"target": "ES2020",
"module": "commonjs",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true,
"outDir": "./dist",
"rootDir": "./src",
"resolveJsonModule": true
}
}
この設定では、厳格な型チェックを有効にしつつ、開発しやすい環境を整えています。最初はこの設定から始めて、必要に応じてカスタマイズしていくのがおすすめです。
tsconfig.jsonファイルの作成方法
tsconfig.jsonファイルの作成方法" onerror="this.onerror=null; this.src='/img/view/java-exception-introduce.jpg';">
TypeScriptプロジェクトでtsconfig.jsonファイルを作成するには、プロジェクトのルートディレクトリで以下のコマンドを実行します。
tsc --init
このコマンドを実行すると、デフォルトの設定が記述されたtsconfig.jsonファイルが自動的に作成されます。その後、必要に応じて設定を変更していきましょう。
tsconfig.jsonファイルを編集した後は、TypeScriptコンパイラを再起動する必要があります。エディタを使っている場合は、一度閉じて開き直すと設定が反映されます。
設定の確認方法
設定の確認方法" onerror="this.onerror=null; this.src='/img/view/java-exception-introduce.jpg';">
設定が正しく反映されているかを確認するには、実際にTypeScriptファイルをコンパイルしてみましょう。
let message: string = "Hello TypeScript";
console.log(message);
上記のコードをsrc/index.tsとして保存し、以下のコマンドを実行します。
tsc
コンパイルが成功すると、distフォルダに変換されたJavaScriptファイルが作成されます。エラーが出た場合は、tsconfig.jsonの設定を見直してみましょう。
