TypeScript プロジェクト用に tsconfig.json ファイルをカスタマイズする方法

tsconfig.json ファイルは、プロジェクト固有のニーズに合わせて TypeScript コンパイラーの動作をカスタマイズできる強力なツールです。この構成ファイルのコンパイラ オプションを微調整することで、プロジェクトの要件に合わせて TypeScript を調整し、型チェック、モジュール解決、コンパイル ターゲットをより適切に制御できるようになります。この記事では、tsconfig.json ファイルをカスタマイズし、TypeScript プロジェクトでその可能性を活用する方法について説明します。

tsconfig について理解します。 json ファイルの構造

カスタマイズに入る前に、tsconfig.json ファイルの構造について理解しましょう。このファイルは JSON 形式で書かれており、さまざまなコンパイラ オプションを表すキーと値のペアのセットが含まれています。各オプションは、ターゲット バージョン、モジュール システム、厳密性など、TypeScript コンパイル プロセスの特定の側面を変更します。

ステップ 1: 新しい TypeScript プロジェクトを作成する

最初、プロジェクト用に新しいディレクトリを作成し、ターミナルまたはコマンド プロンプトを使用してそのディレクトリに移動します。次のコマンドを使用して、新しい TypeScript プロジェクトを初期化します。

npm init -y

このコマンドは、デフォルト設定で新しい npm プロジェクトを初期化し、プロセス内に package.json ファイルを作成します。

ステップ 2: TypeScript をインストールします

次に、次のコマンドを実行して、開発依存関係として TypeScript をインストールします。

npm install typescript --save-dev

このコマンドは TypeScript コンパイラをインストールし、package.json ファイルに devDependency として追加します。

ステップ 3: tsconfig.json ファイルを生成する

デフォルト設定で tsconfig.json ファイルを生成するには、TypeScript コンパイラ コマンドライン インターフェイス (CLI) で tsc –init コマンドを使用します。

npx tsc --init

このコマンドは、新しい tsconfig を作成しますプロジェクトのルート ディレクトリにある .json ファイル。

ステップ 4: コンパイラ オプションを構成する

コンパイラ オプションのカスタマイズ tsconfig.json ファイルをカスタマイズするには、テキスト エディタでファイルを開きます。プロジェクトの要件に基づいてコンパイラ オプションを変更します。一般的にカスタマイズされるオプションは次のとおりです。

1. target:

   target オプションでは、TypeScript コードがコンパイルされる ECMAScript バージョンを指定します。プロジェクトのデプロイメント環境と互換性のあるターゲット バージョンを設定することが重要です。一般的な値には、「es5」、「es6」、「es2015」、「esnext」などがあります。

2. module:

   モジュール オプションによって決まります。 TypeScript コードで使用されるモジュール システム。コンパイルされた JavaScript モジュールがどのように生成および使用されるかを指定します。共通モジュール オプションは、「commonjs」、「amd」、「es2015」、および「esnext」です。モジュール システムの選択は、プロジェクトのターゲット プラットフォームまたはモジュール バンドラーの要件によって異なります。

3. outDir:

   outDir オプションは、モジュール システムの出力ディレクトリを指定します。コンパイルされた JavaScript ファイル。 TypeScript コンパイラーがトランスパイルされた JavaScript ファイルを配置する場所を定義します。デフォルトでは、「./dist」に設定されています。プロジェクトのディレクトリ構造に応じてこのオプションを調整します。

4. rootDir:

   rootDir オプションは、TypeScript ソース ファイルのルート ディレクトリを指定します。これは、コンパイラーに TypeScript ファイルの検索を開始する場所を指示します。デフォルトでは、ソース ファイルが「src」という名前のフォルダにあると想定して、「./src」に設定されています。プロジェクトの正しいディレクトリ構造に一致するようにこのオプションを変更します。

5. strict:

   strict オプションを使用すると、TypeScript の厳密な型チェック オプションが有効になります。 。 true に設定すると、TypeScript はより厳密な型チェック ルールを適用し、コンパイル中に潜在的なエラーを検出するのに役立ちます。これには、「noImplicitAny」、「strictNullChecks」、「strictFunctionTypes」などのいくつかのサブオプションが含まれています。より安全で堅牢なコードを作成するには、厳密モードを有効にすることを強くお勧めします。

6. esModuleInterop:

   esModuleInterop オプションにより、TypeScript と CommonJS の間の相互運用性が簡素化されます。モジュール。 true に設定すると、CommonJS モジュールでデフォルトのインポートとエクスポートを使用できるようになります。このオプションは、デフォルトのエクスポートを使用するライブラリを操作する場合に特に便利です。

7. sourceMap:

   sourceMap オプションは、コンパイル中に対応するソースマップ ファイルを生成します。ソースマップを使用すると、元の TypeScript コードが JavaScript にトランスパイルされている場合でも、ブラウザーまたは開発ツールでデバッグできます。ソースマップを有効にすることは、特に大規模なプロジェクトでスムーズなデバッグ エクスペリエンスを維持するのに役立ちます。

8. noUnusedLocals および noUnusedParameters:

   に設定されている場合、これらのオプションはtrue の場合、コンパイル中に未使用のローカル変数とパラメーターにフラグを立てます。これらは、未使用のコードを特定し、コードのクリーンアップを促進するのに役立ちます。これらのオプションを有効にすると、コードベースがクリーンな状態に保たれ、不要な変数やパラメーターが含まれないことが保証されます。

9. strictNullChecks:

   strictNullChecks オプションは、厳密な null チェックを強制します。 TypeScriptで。有効にすると、TypeScript は潜在的な null または未定義の値を検出し、エラーを防ぐために型チェックを提供します。このオプションは、null 関連のランタイム エラーの発生を減らすことで、より安全なコーディングの実践を奨励します。

10. baseUrl および path:

    これらのオプションは連携して機能します。 TypeScript でモジュール解決を設定します。 「baseUrl」オプションではモジュール名を解決するためのベース ディレクトリを指定し、「paths」オプションではカスタム モジュール名のマッピングを定義できます。この機能は、複雑なモジュール構造を扱う場合、または webpack などのモジュール バンドラーを使用する場合に特に便利です。

ステップ 5: ファイルを含めるおよび除外する

tsconfig.json ファイルを使用すると、コンパイル プロセスにどのファイルを含めるか除外するかを指定できます。 「含める」オプションと「除外する」オプションを探し、それに応じて調整します。

たとえば、ソース ファイルが「src」フォルダーにある場合、「含める」オプションを次のように設定できます。

"include": [
"src/**/*.ts"
]

このパターンには、「src」フォルダーとそのサブディレクトリ内のすべての TypeScript ファイルが含まれます。

ステップ 6: プロジェクトを保存してビルドする

tsconfig.json ファイルを構成したら、それを保存し、TypeScript コンパイラーを実行してプロジェクトをビルドします。次のコマンドを使用します:

npx tsc

TypeScript コンパイラーは tsconfig.json ファイルを読み取り、指定された設定に基づいて TypeScript コードを JavaScript にコンパイルします。

結論

結論として、tsconfig.json ファイルの構成は、コンパイラーの動作を正確に制御できるため、TypeScript プロジェクトでは重要なプロセスです。プロジェクト固有のニーズに応じてオプションをカスタマイズすると、より効率的で堅牢でエラーのないコードを開発できます。このブログ投稿で説明されている手順に従うことで、tsconfig.json ファイルの機能を効果的に活用して、TypeScript プロジェクトを次のレベルに引き上げることができます。コーディングを楽しんでください!

以上がTypeScript プロジェクト用に tsconfig.json ファイルをカスタマイズする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。