tsconfig.json完全ガイド - TypeScriptコンパイラオプションを理解する

1
2
3
4
5
6
7

{
  "compilerOptions": {
    // コンパイラオプションをここに記述
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

1
2
3
4
5

{
  "compilerOptions": {
    "target": "ES2022"
  }
}

1
2

// target: ES2022の場合、トップレベルawaitが使用可能
const data = await fetch('/api/data');

1
2
3
4
5

{
  "compilerOptions": {
    "module": "NodeNext"
  }
}

1
2
3
4
5
6

{
  "compilerOptions": {
    "module": "NodeNext",
    "moduleResolution": "NodeNext"
  }
}

1
2
3
4
5

{
  "compilerOptions": {
    "moduleResolution": "Bundler"
  }
}

1
2
3
4
5

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

// strict: trueの場合、nullチェックが必須
function getLength(str: string | null): number {
  // エラー: Object is possibly 'null'
  // return str.length;
  
  // 正しい実装
  if (str === null) {
    return 0;
  }
  return str.length;
}

1
2
3
4
5

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

1
2
3
4
5

// esModuleInterop: trueの場合
import express from 'express';

// esModuleInterop: falseの場合は以下のように書く必要がある
// import * as express from 'express';

1
2
3
4
5

{
  "compilerOptions": {
    "resolveJsonModule": true
  }
}

1
2
3
4

import config from './config.json';

// configの型は自動的にJSONの構造から推論される
console.log(config.apiUrl); // 型安全にアクセス可能

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"],
      "@components/*": ["./src/components/*"],
      "@utils/*": ["./src/utils/*"]
    }
  }
}

1
2
3
4
5

// 相対パスを使用した場合
import { Button } from '../../../components/Button';

// pathsエイリアスを使用した場合
import { Button } from '@components/Button';

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "NodeNext",
    "moduleResolution": "NodeNext",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "outDir": "./dist",
    "rootDir": "./src",
    "declaration": true,
    "declarationMap": true,
    "sourceMap": true,
    "resolveJsonModule": true,
    "noEmitOnError": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,
    "moduleResolution": "Bundler",
    "allowImportingTsExtensions": true,
    "isolatedModules": true,
    "moduleDetection": "force",
    "noEmit": true,
    "jsx": "react-jsx",
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "noUncheckedSideEffectImports": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["src"]
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "outDir": "./dist",
    "rootDir": "./src",
    "declaration": true,
    "declarationDir": "./dist/types",
    "declarationMap": true,
    "sourceMap": true,
    "composite": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist", "**/*.test.ts"]
}

1
2
3
4
5
6
7
8

{
  "files": [],
  "references": [
    { "path": "./packages/core" },
    { "path": "./packages/utils" },
    { "path": "./packages/app" }
  ]
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

{
  "compilerOptions": {
    "composite": true,
    "declaration": true,
    "declarationMap": true,
    "outDir": "./dist",
    "rootDir": "./src"
  },
  "include": ["src/**/*"]
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

{
  "compilerOptions": {
    "composite": true,
    "declaration": true,
    "outDir": "./dist",
    "rootDir": "./src"
  },
  "include": ["src/**/*"],
  "references": [
    { "path": "../core" },
    { "path": "../utils" }
  ]
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

# ソリューション全体をビルド
tsc --build

# 特定のプロジェクトをビルド
tsc --build packages/app

# クリーンビルド
tsc --build --clean

# 強制的に全プロジェクトをリビルド
tsc --build --force

# ウォッチモード
tsc --build --watch

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

// tsconfig.base.json（共通設定）
{
  "compilerOptions": {
    "target": "ES2022",
    "module": "NodeNext",
    "moduleResolution": "NodeNext",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "declaration": true,
    "declarationMap": true,
    "sourceMap": true
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

// packages/core/tsconfig.json
{
  "extends": "../../tsconfig.base.json",
  "compilerOptions": {
    "composite": true,
    "outDir": "./dist",
    "rootDir": "./src"
  },
  "include": ["src/**/*"]
}

1
2
3
4
5

{
  "compilerOptions": {
    "skipLibCheck": true
  }
}

1
2
3
4
5

{
  "compilerOptions": {
    "isolatedModules": true
  }
}

1
2
3
4
5

{
  "compilerOptions": {
    "noEmit": true
  }
}

1
2
3
4
5

{
  "compilerOptions": {
    "verbatimModuleSyntax": true
  }
}

1
2
3
4
5

// 型のみのインポートは明示的にimport typeを使用
import type { User } from './types';

// 値のインポート
import { getUser } from './api';