TypeScript コンパイルオプション

TypeScript コンパイラ（tsc）には多数のコンパイルオプションがあります。このチュートリアルでは、よく使われるコンパイルオプションとその役割を詳しく説明します。

SVG 図解：TypeScript コンパイルの流れ 背景 タイトル TypeScript のコンパイルプロセスとコンパイルオプション ソースコード TypeScript ソースコード .ts / .tsx 型注釈を含む 矢印1 TypeScript コンパイラ TypeScript コンパイラ (tsc) コンパイルオプション コンパイルオプションの役割： • 型チェック (strict) • 出力形式 (module) • ターゲットバージョン (target) • 宣言ファイル (declaration) ...その他のオプション 矢印2 コンパイル出力 コンパイル出力 .js - JavaScript .d.ts - 型宣言 .map - Source Map 下半分：コンパイルオプションの分類 コンパイルオプションの分類 分類1 型チェック strict noImplicitAny strictNullChecks 分類2 出力制御 outDir declaration sourceMap 分類3 モジュールシステム module moduleResolution esModuleInterop 分類4 言語機能 target lib jsx 矢印マーク

出力制御オプション

例

{
    "compilerOptions": {
        // 出力ディレクトリ
        "outDir": "./dist",

        // ソースのルートディレクトリ
        "rootDir": "./src",

        // .d.ts 宣言ファイルを生成
        "declaration": true,

        // 宣言ファイルの出力ディレクトリ
        "declarationDir": "./types",

        // source map を生成
        "sourceMap": true,

        // .js.map ファイルを生成
        "mapRoot": "./map"
    }
}

型チェックオプション

例

{
    "compilerOptions": {
        // 厳格モード（常に有効にすることを推奨）
        "strict": true,

        // null と undefined をチェック
        "strictNullChecks": true,

        // this パラメータをチェック
        "noImplicitThis": true,

        // 厳格な関数型
        "strictFunctionTypes": true,

        // 厳格なプロパティ初期化
        "strictPropertyInitialization": true,

        // 暗黙的な any を許可しない
        "noImplicitAny": true,

        // void を返すことを許可しない
        "noImplicitReturns": true,

        // すべての厳格チェックを有効化
        "strict": true
    }
}

モジュールオプション

例

{
    "compilerOptions": {
        // モジュールシステム
        "module": "commonjs",

        // モジュール解決戦略
        "moduleResolution": "node",

        // 解決の基準パス
        "baseUrl": ".",

        // パスエイリアス
        "paths": {
            "@/*": ["src/*"]
        },

        // ES モジュールの相互運用
        "esModuleInterop": true,

        // デフォルトインポートを許可
        "allowSyntheticDefaultImports": true,

        // モジュールの分離（isolatedModules）
        "isolatedModules": true
    }
}

ES 機能オプション

例

{
    "compilerOptions": {
        // コンパイルターゲット
        "target": "ES2020",

        // 有効にするライブラリ
        "lib": ["ES2020", "DOM"],

        // 未使用のローカル変数を許可
        "noUnusedLocals": true,

        // 未使用のパラメータを許可
        "noUnusedParameters": true,

        // コードのダウングレード
        "downlevelIteration": true
    }
}

実験的オプション

例

{
    "compilerOptions": {
        // デコレータを有効化
        "experimentalDecorators": true,

        // デコレータのメタデータを有効化
        "emitDecoratorMetadata": true,

        // 非同期イテレータを有効化
        "emitDecoratorMetadata": true,

        // ライブラリの型チェックをスキップ
        "skipLibCheck": true
    }
}

よく使うコンパイルオプションの組み合わせ

例

// Node.js プロジェクト推奨設定
{
    "compilerOptions": {
        "target": "ES2020",
        "module": "commonjs",
        "lib": ["ES2020"],
        "outDir": "./dist",
        "rootDir": "./src",
        "strict": true,
        "esModuleInterop": true,
        "skipLibCheck": true,
        "forceConsistentCasingInFileNames": true,
        "moduleResolution": "node",
        "declaration": true
    }
}

コンパイルオプション表

カテゴリ よく使うオプション
出力 outDir, rootDir, declaration, sourceMap
型チェック strict, strictNullChecks, noImplicitAny
モジュール module, moduleResolution, paths, esModuleInterop
ES 機能 target, lib, downlevelIteration
実験的 experimentalDecorators, emitDecoratorMetadata

まとめ

  • 厳格モード：常に strict: true を有効にする
  • ターゲットバージョン：環境に応じて適切な target を選択
  • モジュールシステム：デプロイ環境に応じて module を選択
  • 型宣言：ライブラリ開発時は declaration を有効にする
その他の拡張