TypeScript Express|极客教程

TypeScript Express

在现代的 Web 开发中，Express 和 TypeScript 是两个非常流行的工具。Express 是一个基于 Node.js 的 Web 应用框架，它简单灵活，适合构建各种类型的 Web 应用。而 TypeScript 是 JavaScript 的超集，它提供了静态类型检查和更好的开发体验。

结合 Express 和 TypeScript 可以让我们在开发 Web 应用时更加方便和安全。本文将详细介绍如何结合 Express 和 TypeScript 进行 Web 应用的开发。

安装

首先，我们需要创建一个新的 Express 项目，并初始化 TypeScript。

$ mkdir express-ts-example
$ cd express-ts-example
$ npm init -y
$ npm install express
$ npm install typescript @types/node @types/express
$ npx tsc --init

上面的命令创建了一个新的项目文件夹，并安装了 Express、TypeScript 以及相应的类型声明文件。然后通过 npx tsc --init 命令初始化 TypeScript 配置文件 tsconfig.json。

创建 Express 应用

接下来，我们创建一个简单的 Express 应用。新建一个 app.ts 文件，并编写以下代码：

import express, { Request, Response } from 'express';

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

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

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

上面的代码创建了一个 Express 应用，并定义了一个简单的路由，当访问根路径时返回 Hello Express TypeScript!。接下来，我们编译 TypeScript 文件并运行应用。

$ npx tsc
$ node app.js

打开浏览器访问 http://localhost:3000，应该能看到页面显示 Hello Express TypeScript!。

路由和控制器

在实际项目中，我们通常会将路由逻辑抽象成控制器。下面是一个使用控制器的示例：

首先，新建一个 controllers 文件夹，并创建一个 HomeController.ts 控制器文件：

import { Request, Response } from 'express';

export class HomeController {
  public index(req: Request, res: Response): void {
    res.send('Welcome to Home Page!');
  }
}

然后，我们修改 app.ts 文件，引入 HomeController 控制器，并修改路由为：

import express from 'express';
import { HomeController } from './controllers/HomeController';

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

app.get('/', new HomeController().index);

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

现在，我们已经将路由逻辑抽象到了控制器中，使得代码更加清晰和易于维护。

中间件

Express 的中间件是一个非常强大且灵活的功能，可以在请求到达路由处理之前或之后执行一些逻辑。下面是一个使用中间件的示例：

首先，我们创建一个中间件 LoggerMiddleware.ts 文件：

import { Request, Response, NextFunction } from 'express';

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

然后，在 app.ts 文件中使用这个中间件：

import express from 'express';
import { HomeController } from './controllers/HomeController';
import { loggerMiddleware } from './middlewares/LoggerMiddleware';

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

app.use(loggerMiddleware);

app.get('/', new HomeController().index);

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

现在，当我们访问任何路由时，都会在控制台输出请求的方法和路径。

数据库连接

在实际项目中，通常会需要连接数据库。下面是一个使用 MongoDB 数据库连接的示例：

首先，我们安装 mongoose 模块：

$ npm install mongoose @types/mongoose

然后，我们创建一个 db.ts 文件来连接 MongoDB 数据库：

import mongoose from 'mongoose';

mongoose.connect('mongodb://localhost/myapp', {
  useNewUrlParser: true,
  useUnifiedTopology: true
})
.then(() => console.log('MongoDB Connected'))
.catch(err => console.error(err));

在 app.ts 文件中引入这个数据库连接文件：

import express from 'express';
import { HomeController } from './controllers/HomeController';
import { loggerMiddleware } from './middlewares/LoggerMiddleware';
import './db';

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

app.use(loggerMiddleware);

app.get('/', new HomeController().index);

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

现在，我们已经成功连接了 MongoDB 数据库。