概要: このチュートリアルでは、TypeScriptを使用してExpressアプリケーションを設定する方法を学びます。
前提条件
- Node.js – バージョン20以降で
.envファイルと--watchフラグをサポートします。.envファイルを読み取るためにdotenvをインストールしたり、ソースコードを変更するたびにサーバーを自動的に再起動するためにnodemonパッケージをインストールする必要はありません。 - TypeScriptコンパイラ(ts-node) は、TypeScriptコードをJavaScriptにコンパイルするNode.jsモジュールです。
- TypeScriptを実行する(TSX)パッケージは、Node.js環境内でTypeScriptを直接実行します。
これらの機能がインストールされていない場合は、方法を確認できます TypeScript開発環境。
TypeScriptを使用してExpressアプリケーションを設定する
ステップ1. Node.jsプロジェクトを作成する
mkdir express-ts
cd express ts
npm init -yCode language: JavaScript (javascript)このコマンドは、新しいプロジェクトディレクトリexpress-tsを作成し、そのディレクトリ内を移動し、新しいpackage.jsonファイルを作成します。
ステップ2. expressパッケージをインストールする
npm install --save express@nextCode language: JavaScript (javascript)このコマンドはExpress 5以降をインストールします。
ステップ3. 開発依存関係をインストールする
npm i -D @types/express @types/nodeCode language: JavaScript (javascript)このコマンドは、expressとNode.jsの開発依存関係を型定義としてインストールします
@types/express– Expressの型定義。@type/node– Node.jsの型定義。
-Dフラグはこれらのパッケージを開発依存関係として追加します。package.jsonファイルには次のセクションが追加されます
"devDependencies": {
"@types/express": "^5.0.0",
"@types/node": "^22.7.6"
},Code language: JavaScript (javascript)より高いバージョンを使用している場合があります。
ステップ4. package.jsonファイルのtypeモジュールにエントリを追加する
"type": "module",Code language: JavaScript (javascript)これにより、CommonJSモジュールではなくESモジュールを使用できます。
さらに、scriptsセクションを次のように変更します
"scripts": {
"start": "npx tsx --env-file=.env --watch src/index.ts"
},Code language: JavaScript (javascript)このコマンドは、src/index.tsで定義されたTypeScriptアプリを開始し、.envファイルで定義された環境変数をロードし、ファイルを編集するたびに自動的にサーバーを再起動します
npx tsxは、Node.js用のTSXランナーを使用します。--env-file=.envは、環境変数を.envファイルからロードします。--watchは、ファイルの変更を監視し、ファイルの変更が検出されると自動的にサーバーを再起動します。src/index.tsはExpress TypeScriptアプリケーションのエントリポイントファイルです。
ステップ5. プロジェクトディレクトリに.envファイルを作成し、ポートを3000に設定します
PORT=3000Code language: JavaScript (javascript)ステップ6. プロジェクトディレクトリに新しいディレクトリsrcと、次のコードを含むindex.tsファイルを作成します
import express, { Request, Response } from "express";
// Create a new express application instance
const app = express();
// Set the network port
const port = process.env.PORT || 3000;
// Define the root path with a greeting message
app.get("/", (req: Request, res: Response) => {
res.json({ message: "Welcome to the Express + TypeScript Server!" });
});
// Start the Express server
app.listen(port, () => {
console.log(`The server is running at http://localhost:${port}`);
});Code language: JavaScript (javascript)ステップ7. 端末でnpm startを実行する
npm startCode language: JavaScript (javascript)次の出力が表示されます
> express-ts@1.0.0 start
> npx tsx --env-file=.env --watch src/index.ts
The server is running at http://localhost:3000Code language: JavaScript (javascript).tsコードを変更すると、サーバーは自動的に再起動します。
この手順では、VSコードとHttp Rest Client拡張機能が必要です。
ステップ8. httpディレクトリと、次の内容を含むhttpディレクトリ内のapi.httpファイルを作成して、ルートルートへのHTTPリクエストを行う
GET http://localhost:3000/Code language: JavaScript (javascript)
リクエストの送信リンクをクリックすると、http://localhost:3000/に対してHTTPリクエストが行われ、次の出力が返されます。
HTTP/1.1 200 OK
X-Powered-By: Express
Content-Type: application/json; charset=utf-8
Content-Length: 57
ETag: W/"39-6zzG7WgJ4cOX2hxA+l9Gi7ltUyc"
Date: ...
Connection: close
{
"message": "Welcome to the Express + TypeScript Server!"
}Code language: JavaScript (javascript)
