Express.js 是现今最为流行的 Node.js Web 框架之一。最近，随着 TypeScript 的兴起，越来越多的开发者开始将 TypeScript 与 Express.js 结合起来。TypeScript 强大的类型推断能力可以为 Express.js 应用程序提供更好的结构和可维护性。
本文将指导你如何使用 TypeScript 编写 Express.js 应用程序，并提供示例代码和深入讲解。考虑到不同读者的技术水平不同，我们从入门开始，逐渐深入，帮助读者掌握 TypeScript + Express.js 的编程技巧。
准备工作
在开始编写 TypeScript + Express.js 应用程序之前，我们需要做一些准备工作：
安装 TypeScript
我们需要全局安装 TypeScript：
--- ------- -- ----------
安装 Express.js
我们需要使用 npm 安装 Express.js：
--- ------- -------
创建 TypeScript 项目
我们可以使用 TypeScript 官方提供的工具 tsc 自动生成 TypeScript 项目的基本结构：
--- ------
该命令将创建一个名为 tsconfig.json 的文件，其中包含 TypeScript 项目的基本设置。
配置 tsconfig.json
我们需要做一些修改，以便让 TypeScript 正确编译我们的 Express.js 应用程序。
打开 tsconfig.json 文件，将以下设置添加到 compilerOptions 中：
------ ---------- ------- -------- --------- ------------------ ----- --------- ------ --------- ----------- ------------------- ------- ------------ ----- --------- ------
让我们一一解释这些设置：
lib: 表示我们希望允许使用 ES2016 的特性和 dom API。types: 告诉 TypeScript 引入 Node.js 内置类型声明文件。esModuleInterop: 允许兼容 CommonJS 和 ES6 模块。target: 支持 ES6。module: 配置输出模块的类型为 CommonJS。moduleResolution: 配置模块解析机制。sourceMap: 开启生成 SourceMap，以支持 Debug。outDir: 编译后的文件输出目录。
安装 TypeScript 与 Express.js 相关的依赖
我们需要安装 TypeScript 和 Express.js 的相关依赖：
--- ------- ---------- -------------- ------- -------
该命令将安装 TypeScript 对 Express.js 的类型声明文件、ts-node 和 nodemon，用于开发时自动重启应用程序。
Hello World
接下来我们来写一个最简单的 Express.js 应用程序，称为 "Hello World"。
创建一个名为 index.ts 的文件，包含以下代码：
------ ------- ---- ---------- ----- --- - ---------- ------------ ----- ---- -- - --------------- -------- --- ---------------- -- -- - ---------------- --------- -- ---- -------- ---
该代码创建了一个 Express.js 应用程序，并设置路由 / 的 GET 方法，当请求该路由时，返回字符串 "Hello World"。
接下来我们运行该应用程序。在终端输入以下命令：
--- ------- ------ ------- --------
该命令运行了 nodemon，用于开发时自动重启应用程序。
现在访问 http://localhost:3000，你应该看到浏览器显示 "Hello World" 字符串。
恭喜！你已经成功创建了一个 TypeScript + Express.js 应用程序！
路由
路由是指应用程序的 URL，可以用来处理不同的请求方法和参数。在 Express.js 中，路由可由 app.get()、app.post()、app.put() 和 app.delete() 等方法创建。在 TypeScript 中，我们可以通过定义接口和类型来使路由更具可读性和可维护性。
我们以 get 方法为例，创建一个 index2.ts 文件，包含以下代码：
------ -------- - -------- -------- - ---- ----------
--------- ---- -
--- -------
----- -------
-
----- ------ ------ - -
-
--- --
----- --------
--
-
--- --
----- ------
--
--
----- --- - ----------
----------------- ----- -------- ---- --------- -- -
----- ------ - --------------------- -- --------
-- -------- -
----- ---- - -------------- -- ---- --- --------
-- ------ -
---------------
- ---- -
-------------------------- --- --------
-
- ---- -
----------------
-
---
---------------- -- -- -
---------------- --------- -- ---- --------
---在该代码中，我们创建了一个 /users 路由，用于返回用户列表。如果路由参数中包含 id，则返回特定用户。否则，返回全部用户列表。
中间件
在 Express.js 中，中间件是一种在请求和响应的过程中，被插入到处理流程中的函数。中间件可以用来执行预处理、模板渲染、验证等任务，增强应用程序的功能和可维护性。
在 TypeScript 中，我们可以为中间件定义自己的类型，提高可读性和可维护性。下面我们来看一个简单的例子，创建一个名为 index3.ts 的文件，包含以下代码：
------ -------- - -------- --------- ------------ - ---- ----------
--------- -------------------- ------- ------- -
------ -
----- -------
--
-
-------- ---------------- --------------------- ---- --------- ----- ------------- -
-- ---------- -
-------
- ---- -
-------------------------------------
-
-
----- --- - ----------
------------------------
------------------ ----- -------- ---- --------- -- -
----- - ---- - - ---------
-------- - - ---- --
---------- -------- ------- --- ---
---
--------------------- ------------ ----- --------------------- ---- --------- -- -
---------- -------- -------- ----------------- -- ----------- ---
---
---------------- -- -- -
---------------- --------- -- ---- --------
---在该代码中，我们创建了一个 /login 路由，用于用户登录。成功登录后，该路由将为请求对象添加一个 user 属性，值为用户名。
我们还创建了一个 /dashboard 路由，该路由需要中间件 requireAuth 来检查用户是否已登录。只有成功登录的用户才能访问该路由。
结论
在本文中，我们介绍了如何使用 TypeScript 和 Express.js 结合编写应用程序。我们讨论了路由和中间件的概念，并提供了深入的讲解和示例代码。
希望本文对 TypeScript + Express.js 初学者有所启发和指导。如有疑问和建议，欢迎在下方评论区留言，谢谢阅读！
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/672ebaa0eedcc8a97c8a9b65