随着前端技术的不断发展，Web 应用的开发也变得越来越复杂和庞大。为了提高开发效率和代码质量，我们可以使用 Express.js 和 TypeScript 来创建 Web 应用。本文将详细介绍如何使用 Express.js 和 TypeScript 来创建一个完整的 Web 应用，包括路由、控制器、模型等。
准备工作
在开始之前，我们需要安装 Node.js 和 TypeScript。Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境，可以让我们在服务器端使用 JavaScript。TypeScript 是 JavaScript 的超集，它提供了静态类型检查和其他高级特性，可以让我们编写更加健壮和可维护的代码。
安装 Node.js 和 TypeScript 可以通过以下命令进行：
# 安装 Node.js sudo apt-get install nodejs # 安装 TypeScript sudo npm install -g typescript
创建项目
我们可以通过 Express.js 的应用生成器来创建一个基础的 Express.js 应用。在终端中执行以下命令：
-- -------------------- ---- ------- - -- ---------- ----- ---- --- ------- -- ----------------- - ---- ------- ---------- ----- - ------ -- ----- - ---- --- -------
这个命令将创建一个名为 myapp 的 Express.js 应用，并使用 EJS 模板引擎。我们可以通过 npm start 命令来启动应用。
添加 TypeScript 支持
默认情况下，Express.js 应用是使用 JavaScript 编写的。为了使用 TypeScript，我们需要进行一些配置。
首先，我们需要安装 TypeScript 相关的依赖：
npm install --save-dev typescript ts-node @types/node
然后，我们需要创建一个名为 tsconfig.json 的 TypeScript 配置文件，并将以下内容复制到文件中：
-- -------------------- ---- -------
-
------------------ -
--------- ------
--------- -----------
--------- -------
------------ -----
--------- -----
------------------ ----
--
---------- -
----------
-
-这个配置文件指定了 TypeScript 的编译选项，包括输出目录、源映射、严格模式等。我们需要将 TypeScript 文件放在 src 目录下，并在 tsconfig.json 中指定该目录。
接下来，我们需要更新 package.json 文件，将启动命令改为使用 ts-node 来运行 TypeScript 文件：
"scripts": {
"start": "ts-node src/index.ts"
},最后，我们需要将 JavaScript 文件转换为 TypeScript 文件。我们可以使用以下命令来创建一个名为 index.ts 的文件，并将原始的 app.js 中的代码复制到该文件中：
touch src/index.ts
添加路由
在 Express.js 中，路由是处理客户端请求的关键。我们可以通过以下命令来创建一个名为 routes 的目录，并在该目录下创建一个名为 index.ts 的文件：
mkdir routes touch routes/index.ts
在 index.ts 中，我们可以定义一些路由，并将其导出：
-- -------------------- ---- ------- ------ - ------- -------- -------- - ---- ---------- ----- ------ - --------- --------------- ----- -------- ---- --------- -- - --------------- --------- --- -------------------- ----- -------- ---- --------- -- - --------------- ----- --- ------ ------- -------
这个路由定义了两个路由：根路由和 /about 路由。当客户端请求这些路由时，将会返回相应的文本。
接下来，我们需要在 app.ts 中导入路由，并将其挂载到应用程序中：
-- -------------------- ---- ------- ------ ------- ---- ---------- ------ ---- ---- ------- ------ ------ ---- --------- ------ ------------ ---- ---------------- ------ ----------- ---- ----------------- ----- --- - ---------- ----------------------- ------------------------ ---------------------------- --------- ----- ---- ------------------------ ------------------------------------------- ------------ ------------ ------------- ------ ------- ----
现在，我们可以使用 npm start 命令来启动应用，并访问 http://localhost:3000 和 http://localhost:3000/about 来测试路由是否正常工作。
添加控制器
路由定义了客户端请求的路径，但它并不知道如何处理这些请求。为了处理请求，我们需要添加控制器。
我们可以在 routes 目录下创建一个名为 hello.ts 的文件，并将以下代码复制到文件中：
import { Request, Response } from 'express';
export const sayHello = (req: Request, res: Response) => {
const name = req.query.name || 'World';
res.send(`Hello, ${name}!`);
};这个控制器定义了一个名为 sayHello 的函数，它从请求参数中获取名称，并返回相应的问候语。
接下来，我们需要更新 routes/index.ts 文件，导入 hello 控制器，并将其添加到 /hello 路由中：
-- -------------------- ---- ------- ------ - ------ - ---- ---------- ------ - -------- - ---- ---------- ----- ------ - --------- --------------- ----- ---- -- - --------------- --------- --- -------------------- ----- ---- -- - --------------- ----- --- -------------------- ---------- ------ ------- -------
现在，我们可以访问 http://localhost:3000/hello?name=John 来测试控制器是否正常工作。
添加模型
在实际应用中，我们通常需要与数据库进行交互。为了实现这一点，我们可以使用模型来封装数据库操作。
我们可以在 models 目录下创建一个名为 user.ts 的文件，并将以下代码复制到文件中：
-- -------------------- ---- ------- ------ --------- ---- - --- ------- ----- ------- ------ ------- - ----- ------ ------ - - - --- -- ----- -------- ------ ------------------- -- - --- -- ----- ------ ------ ----------------- -- - --- -- ----- ---------- ------ --------------------- -- -- ------ ----- ----------- - ---- -------- ---- - --------- -- - ------ ----------------- -- ------- --- ---- -- ------ ----- ----------- - --- ------ -- - ------ ------ --
这个模型定义了一个名为 User 的接口，以及两个函数：getUserById 和 getAllUsers。这些函数模拟了从数据库中检索用户的过程。
接下来，我们需要更新 routes/index.ts 文件，导入 user 模型，并在 /users 路由中使用它：
-- -------------------- ---- -------
------ - ------ - ---- ----------
------ - -------- - ---- ----------
------ - ----- ------------ ----------- - ---- -----------------
----- ------ - ---------
--------------- ----- ---- -- -
--------------- ---------
---
-------------------- ----- ---- -- -
--------------- -----
---
-------------------- ----------
-------------------- ----- ---- -- -
----- ------ ------ - --------------
----------------
---
------------------------ ----- ---- -- -
----- -- - ------------------------
----- ----- ---- - --------- - ----------------
-- ------ -
---------------
- ---- -
--------------------
-
---
------ ------- -------现在，我们可以访问 http://localhost:3000/users 和 http://localhost:3000/users/1 来测试模型是否正常工作。
结论
通过本文的介绍，我们学习了如何使用 Express.js 和 TypeScript 来创建一个完整的 Web 应用。我们学习了如何添加路由、控制器和模型，并使用 TypeScript 来提高代码的质量和可维护性。希望这篇文章对你有所帮助，让你更加熟练地使用 Express.js 和 TypeScript 来开发 Web 应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/675e3439e1dcc5c0fa44b9f1