TypeScript + Node.js プロジェクトのセットアップ方法

この非常に短いガイドでは、新しい (または既存の!) Node.js プロジェクトを使用して TypeScript をセットアップする方法について説明します。

前提条件:

• Node と JavaScript にある程度精通している必要があります。
• コード エディターをインストールする必要があります (できれば VSCode)。
• このガイドでは、Linux、MacOS、またはその他の UNIX に似たオペレーティング システムを使用していることを前提としています。
• このガイドでは、パッケージ マネージャーとして npm を使用していることも前提としています (代わりに、yarn、pnpm、または好みのパッケージ マネージャーを自由に使用してください)。

• これは、TypeScript を非常に迅速に開始する方法を示します。
• このガイドでは、nodemon などの一般的なパッケージを利用して、アプリケーションのホット リロードをサポートする方法も示します。

• TypeScript は、オプションの静的型付けを提供する JavaScript のスーパーセットです。これは Microsoft によって構築されたものであり、間違いなく VS Code 以降に Microsoft がリリースした唯一の優れた機能です (冗談です )。
• ドキュメントとして機能し、オンボーディングのオーバーヘッドを削減して、開発者のエクスペリエンスを向上させます
• バグ/問題を迅速に特定できるため、ソフトウェア全体の品質が向上します
• 詳細については、TypeScript ハンドブックを参照してください。

1. ディレクトリを作成し、新しく作成したフォルダーに移動します

mkdir typescript-example
cd typescript-example

npm init -y

npm install typescript --save-dev

npm install @types/node --save-dev

5. tsconfig.json を作成します

npx tsc --init

6. Node package executer (npx)を使用して tsc コマンドを使用してコードをコンパイルします。

npx tsc

ローカル デベロッパー エクスペリエンスの向上

1. ホットリロード — これにより、ライブ変更時にアプリケーションがホットリロードできるようになるため、dev ex が大幅に改善されます。これは、Node.js アプリの Nodemon を介して設定できます。

npm install --save-dev ts-node nodemon

上記は、TypeScript + Node プロジェクトをローカルですばやくセットアップするのに十分なはずです。次の方法でこれをさらに強化できます。

• リンターを使用する: ESLintのようなものを使用します。これは、コード全体に標準を設定できる静的コード分析ツールです。これを使用して、コードベースのコーディング標準とパターンを適用できます。
• ディープ削除ツールの導入: Rimrafを使用して、本番環境にプッシュする前に不要なファイルを削除します
• 静的モジュール バンドラーを追加します。webpack (またはターボパック) を使用します。これは小規模なプロジェクトではやり過ぎかもしれませんが、アプリケーションがスケールするにつれて、すべての JS/TS を管理するメカニズムが必要になります。
• 自動化 — ビジネスのために上記をどのように自動化できますか?