|
1 | 1 | --- |
2 | 2 | id: typescript-intro-tsconfig |
3 | | -title: 'tsconfig.json: コンパイラの設定' |
| 3 | +title: "tsconfig.json: コンパイラの設定" |
4 | 4 | level: 2 |
5 | | -question: |
6 | | - - '`tsconfig.json`は何のためのファイルですか?' |
7 | | - - '`npx tsc --init`を実行すると何が起きるのですか?' |
8 | | - - '`compilerOptions`の中の`target`, `module`, `strict`などの設定項目はそれぞれ何を設定しているのですか?' |
9 | | - - '`strict: true`がなぜ重要だとされているのですか?これを有効にしないとどうなりますか?' |
| 5 | +question: [] |
10 | 6 | --- |
11 | 7 |
|
12 | 8 | ## tsconfig.json: コンパイラの設定 |
13 | 9 |
|
14 | 10 | 毎回 `npx tsc hello.ts` のようにファイル名を指定するのは手間ですし、プロジェクト全体の設定も管理しづらくなります。そこで、`tsconfig.json` という設定ファイルを使用します。 |
15 | 11 |
|
16 | | -以下のコマンドで初期設定ファイルを生成します。 |
| 12 | +`tsconfig.json` ファイルがない場合は以下のコマンドで初期設定ファイルを生成します。 |
17 | 13 |
|
18 | 14 | ```bash |
19 | 15 | npx tsc --init |
20 | 16 | ``` |
21 | 17 |
|
22 | | -生成された `tsconfig.json` には多くの設定項目がありますが、基本として以下の設定が有効(コメントアウトされていない状態)になっているか確認してください。 |
23 | | - |
24 | | -```json |
25 | | -{ |
26 | | - "compilerOptions": { |
27 | | - "target": "es2016", /* コンパイル後のJSのバージョン */ |
28 | | - "module": "commonjs", /* モジュールシステム */ |
29 | | - "strict": true, /* 厳格な型チェックを有効にする(重要) */ |
30 | | - "esModuleInterop": true, /* CommonJSモジュールとの互換性 */ |
31 | | - "forceConsistentCasingInFileNames": true, /* ファイル名の大文字小文字を区別 */ |
32 | | - "skipLibCheck": true /* 定義ファイルのチェックをスキップ */ |
33 | | - } |
34 | | -} |
35 | | -``` |
| 18 | +生成された `tsconfig.json` には、TypeScriptコンパイラの動作を制御する様々な設定が含まれています。 |
| 19 | + |
| 20 | +特に重要なのは `strict` オプションです。 |
| 21 | +`strict: true` を有効にすると、TypeScriptの厳密な型チェックが有効になります。これにより、コードの品質が向上し、潜在的なバグを早期に発見できます。逆に、`strict` を無効にすると、型安全性が低下し、型関連のエラーが見逃される可能性があります。 |
| 22 | + |
| 23 | +それ以外のオプションはプロジェクトの要件に応じて適宜設定してください。 |
| 24 | + |
| 25 | +> **Note:** my.code();のサイト上の実行環境で使用されている設定は、以下の通りです。 |
| 26 | +> |
| 27 | +> ```json |
| 28 | +> { |
| 29 | +> "compilerOptions": { |
| 30 | +> "target": "ES2023", |
| 31 | +> "lib": ["ESNext", "WebWorker"], |
| 32 | +> "strict": true |
| 33 | +> } |
| 34 | +> } |
| 35 | +> ``` |
0 commit comments