TypeScript 프로젝트에 맞게 tsconfig.json 파일을 사용자 정의하는 방법

tsconfig.json 檔案是一個強大的工具，可讓您自訂 TypeScript 編譯器的行為以滿足專案的特定需求。透過調整此設定檔中的編譯器選項，您可以根據專案的要求自訂 TypeScript，從而更好地控制類型檢查、模組解析和編譯目標。在本文中，我們將探索如何自訂 tsconfig.json 檔案並在 TypeScript 專案中發揮其潛力。

了解 tsconfig.json 檔案。 json 檔案結構

在我們深入自訂之前，讓我們先熟悉一下 tsconfig.json 檔案的結構。該檔案以 JSON 格式編寫，包含一組代表不同編譯器選項的鍵值對。每個選項都會修改 TypeScript 編譯過程的特定方面，例如目標版本、模組系統和嚴格性。

第 1 步：建立新的 TypeScript 專案

首先，為您的專案建立一個新目錄，並使用終端或命令提示字元導航至該目錄。使用以下命令初始化新的 TypeScript 項目：

npm init -y

此命令使用預設設定初始化新的 npm 項目，並在此過程中建立 package.json 檔案。

第2 步：安裝TypeScript

接下來，透過執行以下指令將TypeScript 安裝為開發依賴項：

npm install typescript -- save-dev

此指令會安裝TypeScript 編譯器，並將其作為devDependency 新增至您的package.json 檔案中。

步驟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 などのモジュール バンドラーを使用する場合に特に便利です。

Step 5: Include and Exclude Files

The tsconfig.json file allows you to specify which files to include or exclude from the compilation process. Look for the “include” and “exclude” options and adjust them accordingly.

For example, if your source files are located in the “src” folder, you can set the “include” option like this:

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

This pattern includes all TypeScript files in the “src” folder and its subdirectories.

Step 6: Save and Build Your Project

Once you’ve configured the tsconfig.json file, save it and run the TypeScript compiler to build your project. Use the following command:

npx tsc

The TypeScript compiler will read the tsconfig.json file and compile your TypeScript code into JavaScript based on the specified settings.

Conclusion

In conclusion, configuring the tsconfig.json file is an important process in TypeScript projects because it provides precise control over the compiler’s behavior. Personalizing options according to your project’s specific needs lets you develop more efficient, robust, and error-free code. By following the steps provided in this blog post, you can effectively harness the power of the tsconfig.json file, taking your TypeScript projects to the next level. Happy coding!

위 내용은 TypeScript 프로젝트에 맞게 tsconfig.json 파일을 사용자 정의하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!