TypeScriptのcompilerOptions完全解説 よく使う設定一覧と初心者におすすめのtsconfig設定

1. compilerOptionsとは何か

1. compilerOptionsとは何か

TypeScriptのcompilerOptionsとはTypeScriptのコードをJavaScriptに変換するときのルールを決める設定です。初心者の方は翻訳の設定と考えると理解しやすいです。TypeScriptはそのままではブラウザで動かないためJavaScriptに変換する必要があります。その変換方法を細かく指定するのがcompilerOptionsです。

この設定を理解することでエラーを減らしたり開発しやすい環境を作ることができます。

2. tsconfigファイルの基本構造

2. tsconfigファイルの基本構造

TypeScriptではtsconfigという設定ファイルを使います。この中にcompilerOptionsを記述します。

{
  "compilerOptions": {
    "target": "ES6",
    "module": "CommonJS"
  }
}

このように設定を書くことでどの形式でJavaScriptを出力するかを指定できます。

3. targetの設定

3. targetの設定

targetはどのバージョンのJavaScriptに変換するかを指定する設定です。例えばES5やES6などがあります。古いブラウザに対応する場合はES5新しい機能を使いたい場合はES6以上を選びます。

{
  "compilerOptions": {
    "target": "ES5"
  }
}

初心者の方は基本的にES6以上を使うことが多いです。

4. moduleの設定

4. moduleの設定

moduleはコードの読み込み方法を指定する設定です。Node環境ではCommonJSブラウザ環境ではESNextなどが使われます。

{
  "compilerOptions": {
    "module": "CommonJS"
  }
}

開発環境によって使い分けることが重要です。

5. strictの設定

5. strictの設定

strictは型チェックを厳しくする設定です。これを有効にするとミスを早い段階で見つけることができます。初心者の方でもできるだけ有効にすることをおすすめします。

{
  "compilerOptions": {
    "strict": true
  }
}

この設定により安全なコードを書くことができます。

6. outDirとrootDirの設定

6. outDirとrootDirの設定

outDirは変換後のJavaScriptファイルの出力先を指定します。rootDirは元のTypeScriptファイルの場所を指定します。

{
  "compilerOptions": {
    "rootDir": "./src",
    "outDir": "./dist"
  }
}

このようにフォルダを分けることでプロジェクトが整理されます。

7. esModuleInteropの設定

7. esModuleInteropの設定

esModuleInteropは他のライブラリとの互換性を高める設定です。特に外部ライブラリを使う場合に便利です。

{
  "compilerOptions": {
    "esModuleInterop": true
  }
}

初心者の方はとりあえず有効にしておくと安心です。

8. 初心者におすすめの設定例

8. 初心者におすすめの設定例

最後に初心者におすすめの設定を紹介します。これをベースにすると安全で開発しやすい環境を作ることができます。

{
  "compilerOptions": {
    "target": "ES6",
    "module": "CommonJS",
    "strict": true,
    "rootDir": "./src",
    "outDir": "./dist",
    "esModuleInterop": true
  }
}

この設定を使うことで基本的な開発に必要な環境が整います。