使用 TypeScript 设置 Express

摘要：在本教程中，您将学习如何使用 TypeScript 设置 Express 应用程序。

先决条件

• Node.js – 版本 20 或更高版本以支持 .env 文件和 --watch 标志。您无需安装 dotenv 来读取 .env 文件，也无需安装 nodemon 包来自动重启服务器，只要您更改源代码即可。
• TypeScript 编译器 (ts-node) 是一个 Node.js 模块，它将 TypeScript 代码编译成 JavaScript。
• 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": "module",Code language: JavaScript (javascript)

这将允许您使用 ES 模块而不是 CommonJS 模块。

此外，将脚本部分更改为以下内容

 "scripts": {
    "start": "npx tsx --env-file=.env --watch  src/index.ts"
  },Code language: JavaScript (javascript)

此命令启动在 src/index.ts 中定义的 TypeScript 应用程序，加载在 .env 文件中定义的环境变量，并在您更改文件时自动重新启动服务器

• npx tsx 使用 TSX 运行器用于 Node.js。
• --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 Code 和 Http Rest Client 扩展。

步骤 8. 通过创建一个 http 目录和 api.http 文件（在 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)