TypeScript 学习笔记（七）：TypeScript 与后端框架的结合应用

原创

g201909 2024-06-08 17:30:23 ©著作权

文章标签 typescript 前端框架学习 Express User 文章分类 Redis 数据库

©著作权归作者所有：来自51CTO博客作者g201909的原创作品，请联系作者获取转载授权，否则将追究法律责任

1. 引言

在前几篇学习笔记中，我们已经探讨了 TypeScript 的基础知识和在前端框架（如 Angular 和 React）中的应用。本篇将重点介绍 TypeScript 在后端开发中的应用，特别是如何与 Node.js 和 Express 结合使用，以构建强类型、可维护的后端应用。

2. TypeScript 与 Node.js

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时，广泛用于构建后端应用。TypeScript 可以为 Node.js 项目提供类型检查和更好的开发体验。

2.1 初始化 Node.js 项目

首先，初始化一个新的 Node.js 项目，并安装 TypeScript 和类型定义文件。

mkdir my-node-app
cd my-node-app
npm init -y
npm install typescript ts-node @types/node --save-dev

2.2 配置 TypeScript

创建一个 tsconfig.json 文件，用于配置 TypeScript 编译选项。

{
  "compilerOptions": {
    "target": "ES6",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "outDir": "./dist"
  },
  "include": ["src"]
}

2.3 编写 TypeScript 代码

在 src 目录中编写 TypeScript 代码。例如，创建一个简单的 HTTP 服务器。

// src/server.ts
import http from 'http';

const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/plain');
  res.end('Hello, TypeScript with Node.js\n');
});

const port = 3000;
server.listen(port, () => {
  console.log(`Server running at http://localhost:${port}/`);
});

2.4 运行 TypeScript 代码

使用 ts-node 运行 TypeScript 代码。

npx ts-node src/server.ts

3. TypeScript 与 Express

Express 是一个基于 Node.js 的轻量级 Web 框架，广泛用于构建 Web 应用和 API。结合 TypeScript，可以为 Express 应用提供类型检查和更好的开发体验

。

3.1 初始化 Express 项目

首先，初始化一个新的 Express 项目，并安装所需的依赖项。

npm install express @types/express --save

3.2 配置 TypeScript

确保 tsconfig.json 文件正确配置。

{
  "compilerOptions": {
    "target": "ES6",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "outDir": "./dist"
  },
  "include": ["src"]
}

3.3 创建基本的 Express 应用

在 src 目录中创建一个基本的 Express 应用。

// src/app.ts
import express, { Request, Response } from 'express';

const app = express();
const port = 3000;

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

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

3.4 运行 Express 应用

使用 ts-node 运行 Express 应用。

npx ts-node src/app.ts

4. 使用 TypeScript 构建 RESTful API

通过 TypeScript 和 Express 构建一个简单的 RESTful API。

4.1 定义数据模型

创建一个 User 数据模型。

// src/models/User.ts
export interface User {
  id: number;
  name: string;
  email: string;
}

4.2 创建路由

创建一个用于处理用户相关请求的路由。

// src/routes/userRoutes.ts
import express, { Request, Response } from 'express';
import { User } from '../models/User';

const router = express.Router();

let users: User[] = [
  { id: 1, name: 'John Doe', email: 'john@example.com' },
  { id: 2, name: 'Jane Doe', email: 'jane@example.com' },
];

router.get('/users', (req: Request, res: Response) => {
  res.json(users);
});

router.get('/users/:id', (req: Request, res: Response) => {
  const userId = parseInt(req.params.id);
  const user = users.find(u => u.id === userId);
  if (user) {
    res.json(user);
  } else {
    res.status(404).send('User not found');
  }
});

router.post('/users', (req: Request, res: Response) => {
  const newUser: User = req.body;
  users.push(newUser);
  res.status(201).json(newUser);
});

router.put('/users/:id', (req: Request, res: Response) => {
  const userId = parseInt(req.params.id);
  const updatedUser: User = req.body;
  const userIndex = users.findIndex(u => u.id === userId);
  if (userIndex !== -1) {
    users[userIndex] = updatedUser;
    res.json(updatedUser);
  } else {
    res.status(404).send('User not found');
  }
});

router.delete('/users/:id', (req: Request, res: Response) => {
  const userId = parseInt(req.params.id);
  users = users.filter(u => u.id !== userId);
  res.status(204).send();
});

export default router;

4.3 集成路由

在主应用文件中集成用户路由。

// src/app.ts
import express from 'express';
import bodyParser from 'body-parser';
import userRoutes from './routes/userRoutes';

const app = express();
const port = 3000;

app.use(bodyParser.json());
app.use('/api', userRoutes);

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

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

5. 使用中间件和错误处理

使用中间件来增强 Express 应用，并处理错误。

5.1 使用中间件

在 Express 应用中使用中间件，例如日志记录中间件。

// src/middleware/logger.ts
import { Request, Response, NextFunction } from 'express';

export function logger(req: Request, res: Response, next: NextFunction) {
  console.log(`${req.method} ${req.url}`);
  next();
}

// src/app.ts
import { logger } from './middleware/logger';

app.use(logger);

5.2 错误处理

定义全局错误处理器，捕获并处理所有未处理的错误。

// src/middleware/errorHandler.ts
import { Request, Response, NextFunction } from 'express';

export function errorHandler(err: Error, req: Request, res: Response, next: NextFunction) {
  console.error(err.stack);
  res.status(500).send('Something went wrong!');
}

// src/app.ts
import { errorHandler } from './middleware/errorHandler';

app.use(errorHandler);