TypeScript Express:使用 Node.js 构建强大的 API

2025-05-28

TypeScript Express:使用 Node.js 构建强大的 API

在当今快节奏的 Web 开发世界中,构建健壮且可扩展的 API 对于任何应用程序都至关重要。Node.js 凭借其非阻塞、事件驱动的架构以及庞大的库和框架生态系统,已成为后端开发的热门选择。Express 就是这样一个框架,它简化了使用 Node.js 构建 Web 应用程序和 API 的过程。

TypeScript 是 JavaScript 的静态类型超集,因其在开发过程中捕获错误并提供更强大的工具和自动补全功能的能力而受到开发者的青睐。在本篇博文中,我们将探讨如何使用 TypeScript 和 Express 构建强大的 API,并充分利用 TypeScript 带来的优势。

1. 设置 TypeScript Express 项目

要开始使用 TypeScript 构建 Express API,您需要设置开发环境。请按照以下步骤操作:

  • 安装 Node.js 和 npm:
    如果还没有安装,请从官方网站 ( https://nodejs.org ) 下载并安装 Node.js。npm(Node 包管理器)与 Node.js 捆绑在一起,因此一旦安装了 Node.js,您就会拥有 npm。

  • 为您的项目创建新目录:
    打开终端或命令提示符,并导航到您想要创建项目的目录。您可以使用 mkdir 命令创建新目录。例如:

mkdir my-express-api
Enter fullscreen mode Exit fullscreen mode
  • 导航到项目目录:使用 cd 命令导航到新创建的目录:
cd my-express-api
Enter fullscreen mode Exit fullscreen mode
  • 初始化一个新的 Node.js 项目:要初始化一个新的 Node.js 项目,请在终端中运行以下命令:
npm init
Enter fullscreen mode Exit fullscreen mode

此命令将提示您提供有关项目的信息,例如名称、版本、描述、入口点等。您可以按回车键接受默认值或提供您自己的值。

  • 安装必要的依赖项:初始化项目后,您需要安装所需的依赖项。在本例中,您需要 Express、TypeScript、ts-node 以及 Express 的 TypeScript 声明。

在终端中运行以下命令来安装这些依赖项:

npm install express typescript ts-node @types/node @types/express --save-dev
Enter fullscreen mode Exit fullscreen mode

此命令将下载并安装指定的包,并将它们作为 devDependencies 保存在您的 package.json 文件中。

Express:一个极简且灵活的 Node.js Web 应用程序框架。TypeScript
JavaScript 的超集,添加了静态类型和高级语言特性。ts
-node:一个 Node.js 的 TypeScript 执行环境。
@types/express:Express 的 TypeScript 声明文件。
--save-dev标志确保这些依赖项保存为 devDependencies,因为它们仅在开发过程中需要。

  • 配置 TypeScript:tsconfig.json在项目根目录中创建一个文件。此文件指定 TypeScript 配置。
{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "outDir": "./dist",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*.ts"],
  "exclude": ["node_modules"]
}
Enter fullscreen mode Exit fullscreen mode

此配置指定 TypeScript 编译器的输出目录、模块系统和其他选项。

  • 创建一个名为 的新文件夹src,并在其中创建一个index.ts文件。这将是应用程序的入口点。

安装完成后,您就可以开始构建 TypeScript Express API 了。现在,您可以继续创建 TypeScript 文件并配置 Express 应用程序。

  • Note:建议.gitignore在项目目录中创建一个文件,将不必要的文件排除在版本控制之外。添加node_modules到该.gitignore文件可以防止 Git 跟踪该文件。

2. 使用 TypeScript 构建 Express API

现在项目已经设置好了,让我们用 TypeScript 构建一个简单的 Express API:

  • 导入必要的依赖项index.ts
import express, { Request, Response } from 'express';

const app = express();
const port = process.env.PORT || 3000;
Enter fullscreen mode Exit fullscreen mode
  • 定义路线:
app.get('/', (req: Request, res: Response) => {
  res.send('Hello, TypeScript Express!');
});
Enter fullscreen mode Exit fullscreen mode
  • 启动服务器:
app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}`);
});
Enter fullscreen mode Exit fullscreen mode

此代码设置了一个基本的 Express 服务器,该服务器监听端口 3000,并在访问根路径时以问候语响应。

  • 向 package.json 添加脚本 将以下脚本添加到您的package.json文件:
"scripts": {
  "start": "ts-node src/index.ts",
  "build": "tsc",
  "serve": "node dist/index.js"
}
Enter fullscreen mode Exit fullscreen mode

这些脚本允许您启动开发服务器、构建 TypeScript 文件并提供编译后的 JavaScript 文件。

  • 您现在可以通过运行以下命令来启动您的应用程序:
npm start
Enter fullscreen mode Exit fullscreen mode

在浏览器中访问http://localhost:3000,您应该会看到消息“Hello, TypeScript Express!”。

3.创建一个简单的 CRUD API

现在我们的基本服务器已经设置好了,我们可以开始构建 API。让我们创建一个简单的 CRUD(创建、读取、更新、删除)API 来管理任务列表。

  • 定义任务模型在里面创建一个models目录src,并添加一个task.ts文件,内容如下代码:
export interface Task {
  id: number;
  title: string;
  description: string;
  completed: boolean;
}
Enter fullscreen mode Exit fullscreen mode

该接口定义了Task对象的结构。

  • 实现任务 APIroutes在里面创建一个目录src并添加一个tasks.ts文件,代码如下:
import { Router, Request, Response } from 'express';
import { Task } from '../models/task';

const router = Router();
let tasks: Task[] = [];

// Add your CRUD API implementation here

export default router;
Enter fullscreen mode Exit fullscreen mode

实现 CRUD 操作
现在我们已经设置了基本的任务 API,让我们实现 CRUD 操作。

  • 创建任务:在tasks.ts文件中添加以下代码即可创建新任务:
router.post('/', (req: Request, res: Response) => {
  const task: Task = {
    id: tasks.length + 1,
    title: req.body.title,
    description: req.body.description,
    completed: false,
  };

  tasks.push(task);
  res.status(201).json(task);
});
Enter fullscreen mode Exit fullscreen mode

此代码创建一个具有唯一 ID 的新任务并将其添加到tasks数组中。

  • 读取所有任务:将以下代码添加到tasks.ts文件以检索所有任务:
router.get('/', (req: Request, res: Response) => {
  res.json(tasks);
});
Enter fullscreen mode Exit fullscreen mode
  • 读取单个任务:将以下代码添加到tasks.ts文件,以通过ID检索特定任务:
router.get('/:id', (req: Request, res: Response) => {
  const task = tasks.find((t) => t.id === parseInt(req.params.id));

  if (!task) {
    res.status(404).send('Task not found');
  } else {
    res.json(task);
  }
});
Enter fullscreen mode Exit fullscreen mode

此代码搜索具有指定 ID 的任务,如果找到则返回,如果未找到则返回 404 错误。

  • 更新任务:将以下代码添加到tasks.ts文件以通过 ID 更新特定任务:
router.put('/:id', (req: Request, res: Response) => {
  const task = tasks.find((t) => t.id === parseInt(req.params.id));

  if (!task) {
    res.status(404).send('Task not found');
  } else {
    task.title = req.body.title || task.title;
    task.description = req.body.description || task.description;
    task.completed = req.body.completed || task.completed;

    res.json(task);
  }
});
Enter fullscreen mode Exit fullscreen mode

此代码使用请求正文中提供的新值更新指定的任务。

  • 删除任务:在tasks.ts文件中添加以下代码,可以通过ID删除特定任务:
router.delete('/:id', (req: Request, res: Response) => {
  const index = tasks.findIndex((t) => t.id === parseInt(req.params.id));

  if (index === -1) {
    res.status(404).send('Task not found');
  } else {
    tasks.splice(index, 1);
    res.status(204).send();
  }
});
Enter fullscreen mode Exit fullscreen mode

此代码从任务数组中删除指定的任务。

将 Task API 与 Express 服务器集成
最后,让我们将 Task API 与 Express 服务器集成。使用以下更改更新 index.ts 文件:

import express, { Request, Response } from 'express';
import taskRoutes from './routes/tasks';

const app = express();
const port = process.env.PORT || 3000;

app.use(express.json()); // Add this line to enable JSON parsing in the request body
app.use('/tasks', taskRoutes); // Add this line to mount the Task API routes

app.get('/', (req: Request, res: Response) => {
  res.send('Hello, TypeScript Express!');
});

app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}`);
});
Enter fullscreen mode Exit fullscreen mode

现在,我们的任务 API 已与 Express 服务器完全集成,我们可以对任务执行 CRUD 操作。

添加验证和错误处理
为了进一步改进我们的 API,让我们添加验证和错误处理,以确保我们从客户端接收的数据是有效的,并且我们提供有意义的错误消息。

  • 安装验证库:首先,安装express-validator及其类型定义:
npm install express-validator @types/express-validator
Enter fullscreen mode Exit fullscreen mode
  • 向任务 API 添加验证:更新 tasks.ts 文件以包含任务创建和更新端点的验证:
import { Router, Request, Response } from 'express';
import { body, validationResult } from 'express-validator';
import { Task } from '../models/task';

const router = Router();
let tasks: Task[] = [];

const taskValidationRules = [
  body('title').notEmpty().withMessage('Title is required'),
  body('description').notEmpty().withMessage('Description is required'),
  body('completed').isBoolean().withMessage('Completed must be a boolean'),
];

router.post('/', taskValidationRules, (req: Request, res: Response) => {
  const errors = validationResult(req);

  if (!errors.isEmpty()) {
    return res.status(400).json({ errors: errors.array() });
  }

   const task: Task = {
    id: tasks.length + 1,
    title: req.body.title,
    description: req.body.description,
    completed: false,
  };

  tasks.push(task);
  res.status(201).json(task)
});

router.put('/:id', taskValidationRules, (req: Request, res: Response) => {
  const errors = validationResult(req);

  if (!errors.isEmpty()) {
    return res.status(400).json({ errors: errors.array() });
  }

const task = tasks.find((t) => t.id === parseInt(req.params.id));

  if (!task) {
    res.status(404).send('Task not found');
  } else {
    task.title = req.body.title || task.title;
    task.description = req.body.description || task.description;
    task.completed = req.body.completed || task.completed;

    res.json(task);
  }

});

// ... (rest of the CRUD operations)

export default router;
Enter fullscreen mode Exit fullscreen mode

title这些更改添加了、description和的验证规则,completed fields如果验证失败,则返回带有错误消息的 400 Bad Request 响应。

  • 添加错误处理中间件:为了以更集中的方式处理错误,让我们向 Express 服务器添加一个错误处理中间件。使用以下更改更新 index.ts 文件:
import express, { Request, Response, NextFunction } from 'express';
import taskRoutes from './routes/tasks';

const app = express();
const port = process.env.PORT || 3000;

app.use(express.json());
app.use('/tasks', taskRoutes);

app.get('/', (req: Request, res: Response) => {
  res.send('Hello, TypeScript Express!');
});

// Add this error handling middleware
app.use((err: Error, req: Request, res: Response, next: NextFunction) => {
  console.error(err.stack);
  res.status(500).send('Something went wrong');
});

app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}`);
});
Enter fullscreen mode Exit fullscreen mode

该中间件将捕获任何未处理的错误并返回 500 内部服务器错误响应。

结论

在本篇博文中,我们通过为 Task 模型实现 CRUD 操作,使用 TypeScript 和 Express 构建了一个强大的 API。请继续探索和扩展您的 API,以包含更多高级功能,例如身份验证、速率限制和缓存。祝您编码愉快!

文章来源:https://dev.to/wizdomtek/typescript-express-building-robust-apis-with-nodejs-1fln
PREV
8 个无人传授的 JavaScript 技巧和窍门
NEXT
程序员使用一台显示器的完整指南。