使用 Fastify 和 TypeScript 构建 Node.js API

AI 编程助手，豆包旗下的编程助手，提供智能补全、智能预测、智能问答等能力，节省开发时间，释放脑海中的创造力，支持 VSCode，点击体验 AI

在前端开发中，构建 API 是非常常见的任务。本文将介绍如何使用 Fastify 和 TypeScript 构建高效且类型安全的 Node.js API。所使用的技术栈如下：

  • Fastify：一个快速和低开销的 Web 框架；
  • TypeScript：一种静态类型检查的 JavaScript 的超集；
  • Jest：一个用于 JavaScript 测试的流行框架。

准备工作

在开始之前，你需要安装以下工具：

  • node.js 和 npm：在 https://nodejs.org/ 上下载安装包以安装；
  • TypeScript：在安装 npm 后，可以使用以下命令在全局安装 TypeScript：npm install -g typescript；
  • Jest：可以使用以下命令在项目中进行安装：npm install jest @types/jest ts-jest -D。

创建项目

我们将使用以下命令创建一个名为 fastify-typescript-api 的新项目：

----- ----------------------
-- ----------------------
--- ---- --

接下来，我们将添加一些必要的依赖项：

--- ------- ------- ------------ -------------- -------------- ----- ---------- ----------- --

这些依赖项包括：

  • fastify、fastify-cors 和 fastify-helmet：Fastify 所需的必要插件；
  • fastify-plugin：一个 Fastify 插件，允许我们使用异步插件；
  • tslib：TypeScript 标准库的引用，支持在 JavaScript 运行时使用 TypeScript 的功能；
  • typescript：TypeScript 编译器；
  • @types/node：TypeScript 的 Node.js 类型定义。

配置 TypeScript

在 fastify-typescript-api 项目目录中创建一个新的 tsconfig.json 文件。在这个文件里，将代码源目录设置为 ./src，同时配置 TypeScript 编译器按照模块的引用方式（"module": "CommonJS"）将其编译到我们的输出目录 ./dist 中。tsconfig.json 应该如下：

-
    ------------------ -
        --------- ------
        --------- -----------
        ------ ------- -------
        --------- ---------
        ---------- --------
        ------------ -----
        -------------- -----
        ------------------ -----
        -------------------- ----
    --
    ---------- -
        ----------
    --
    ---------- -
        ---------------
        --------------
    -
-

创建入口文件

将我们的 Fastify 实例创建在 ./src/server.ts 文件中。我们先从 fastify 包引入 Fastify，然后初始化一个实例：

------ - -- ------- ---- ----------

----- ------ - --------- ------- ---- ---

创建插件

现在创建一个 Fastify 插件来设置我们的路由处理器。首先，为了使用异步函数，我们需要在 main 函数中使用 Fastify 插件 fastify-plugin。我们的路由处理器函数接受两个参数：请求对象（req）和回复对象（reply）。每个参数都有自己的类型，我们使用 TypeScropt 来保证类型安全。我们最终使用 Fastify 的 get 方法设置我们的路由处理器：

------ - -- ------- ---- ----------
------ - -- ------ ---- -----------------
------ - -- ---- ---- ---------------
------ - -- -- ---- -----------------

----- -------- ------ -
    ----- ------ - --------- ------- ---- ---

    ------------------------
    ----------------------

    ------------------------ ---------- -------- ----- -- -
        ---------------------- ----- ----- ------ -- -
            -----------------------------------------
            ------ - -------- ------ ------ --
        ---
        -------
    ----

    ----- ------------------- -----------
    ------------------- ------- --------- -- -----------------
-

-------

在上面，我们使用了一些 Fastify 插件来促进我们的 REST API 的安全性和可用性。现在，我们可以运行我们的 API：tsc && node ./dist/server.js（在命令行中，使用 CTRL+C 退出服务器）。

现在，我们可以使用我们的 API 来通过 GET 请求显示 "Hello world"。这个 API 相当简单且有用，但对于一个真正的 API，我们需要做得更好。接下来，我们将使用一些更高级的快捷方式来进行设计。

重构

为了向更严格的代码分离和代码结构朝着正确的方向发展，我们需要再次重构我们的代码。首先我们创建一些必要的目录：

  • ./src/controllers：应用程序逻辑；
  • ./src/routes：Fastify 路线（路由）；
  • ./src/interfaces：应用程序接口（TS 类型）。

在 ./src/routes/index.ts 文件中，创建我们的路由：

------ - -- ------- ---- ----------
------ - -- -- ---- -----------------
------ - ----------- - ---- ----------------

----- ------ - -------- ------------------------ ----- ---- ----- ---- -- -
    ---------------------------- - ------- -------- ---
    -------
--

------ ------- -----------

在 ./src/routes/helloRouter.ts 文件中，创建我们的路由逻辑：

------ - -- ------- ---- ----------
------ - -- -- ---- -----------------

----- ----------- - ---------- ------------------------ ----- ---- ----- ---- -- -
    ----------------- ----- ----- ------ -- --
        -------- ------ --------
    ----
    -------
--

------ - ----------- --

在 ./src/interfaces/interfaces.ts 文件中，创建我们的接口（TypeScript 类型）：

--------- -------------- -
    -------- ----
    ------------ --------
    -----
    - -
        ------------- -------
    -
    - ------
-

------ - -------------- --

在 ./src/controllers/helloController.ts 文件中，创建我们的逻辑：

------ - ------------- -------------- - ---- ----------

------ ----- --------------- -
    ----- ------------- --------------- ------ ------------- -
        ------ ----------------------------------------------- -------- ------ ------ ---
    -
-

最后在 ./src/app.ts 中，我们会初始化 Fastify，应用我们的路由，然后使用 fastify-ws 添加 WebSockets 支持：

------ - -- ------- ---- ----------
------ - -- ------ ---- -----------------
------ - -- ---- ---- ---------------
------ - -------------- - ---- --------------------------
------ - -- -- ---- -----------------
------ ------ ---- -----------
------ - -- --------- ---- -------------

------ ----- --- -
    ------------------- --------- --------------- - -

    ----- ------- -
        ----- ------ - --------- ------- -------------------- ---

        ------------------------
        ----------------------
        ----------------------------

        ----- -------------------------- - ------- -------------------- ---

        ----- ------------------- -----------
        ------------------- ------- --------- -- -----------------
    -

    ------- --------------------------- ----------------------- -------- ------------------------------------ -
        ----------------------------
    -
-

最后，我们可以运行我们的 API：tsc && node ./dist/server.js，然后体验我们的最简单的 API 版本。

测试

最后，我们将使用 Jest 来编写测试及测试我们的 API。以下步骤建议你不要忽视，因为在编写测试及运行测试的版本处理和执行有一定差异性：

  • 将 TypeScript 与 Jest 集成；
  • 集成 TypeScript 代码覆盖率；
  • 编写测试用例。

将 TypeScript 与 Jest 集成

首先，我们将 TypeScript 与 Jest 集成。要做到这一点，我们需要安装一个 Jest 预处理器 ts-jest。同时在根目录下新建一个 jest.config.js 文件，内容如下：

-------------- - -
    ------- ----------
    ---------------- ------
--

安装：

--- ------- ---- ----------- ------- --

集成 TypeScript 代码覆盖率

无论代码质量如何，在没有测试的情况下发布它不会是个好主意。获取良好的代码覆盖率，可以使测试人员的生活更加容易。要集成代码覆盖率，我们需要安装代码覆盖率库 @istanbuljs/nyc-config-typescript：

--- ------- --- --------------------------------- --

在项目根目录创建一个 .nycrc 文件，内容如下：

-
    ---------- ------------------------------------
    ------ -----
    ---------- -
        --------------
    --
    ----------- -
        -------
        ------
    --
    ----------------- ----
-

然后，添加以下脚本到 package.json：

---------- -
    ------- ----- -----------
-

项目就可以生成浏览器中的代码测试覆盖率HTML报告。运行 npm run test 就可以看到HTML报告了。

编写测试用例

创建测试用例并分为以下几部分：

  • 测试控制器文件；
  • 测试测试用例文件。

在 ./__tests__ 目录下创建 controllers 目录，并添加 helloController.spec.ts 文件：

------ -------------------
------ - --------------- - ---- ----------------------------------------

--- ---------------- ----------------

------------ -- -
    --------------- - --- ------------------
---

--------------------------- -- -- -
    ---------- ------ ----- ------- ----- -- -- -
        ----- ------- - -- -- ----
        ----- --------- - -
            ----- ---------------------------
            ----- ---------------------------
            ----- ----------
        - -- ----

        ----- ----------------------------------- -----------

        ----------------------------------------------------------------
        -------------------------------------------------
        --------------------------------------------- -------- ------ ------ ---
    ---
---

然后创建另一个 __tests__ 的目录，并在其中添加 app.spec.ts 文件：

------ - --- - ---- -------------
------ - -------------- - ---- -------------------------------
------ - -- ----- ---- --------
------ - -- --------- ---- -----

-----------------------

----- --------- -------------- - - ------- ----- --

--- ---- ----
--- ------- --------------------- - -----
--- --------- ------------------------ - -----

--------------- -- -- -
    --- - --- --------------
    ----- ------------

    -------- - ----------------------
        -------- ----------------------------
    ---

    ------ - --- ------------------ ----- ---- ---

    ----------------------- ---- -- -
        ---------------- --------- -- -
            ----- ------ - -------------------------------
            ------------------------ -------- ---------- ------------------ ----
        ---
    ---
---

----------- -- -
    ----------------
---

--------------- -- -- -
    ---------- --- ----- ----- -------- ----- -- -- -
        ----- - ------- ---- - - ----- ------------------------------------------------------

        -------------------------
        -------------------------------- --------
    ---

    ---------- --- ----- ----- -------------- ------ -- -
        ----- ------ - --- ---------------------------------------
        -------------------- --------- -- -
            -------------------------------------------------------------- ----- --------
            ---------------
            -------
        ---

        ----------------- -- -- -
            ---------------------------- -------- ------ ------ ----
        ---
    ---
---

结论

现在我们整合了 Fastify，TypeScript，Jest 和 Jest 的 TypeScript 模式，并生成了所有组成部分的基本框架。在容易参考和阅读的代码结构中，我们编写了一个简单的 API 并成功运行了它，然后增加了测试。开发者可以在具体的许可、管理和协议下复制任何部分或全部此代码，并对其进行使用，测试和修改。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/671b84619babaf620fac30db

阅读全文

猜你喜欢

  • Webpack 构建优化：使用 HappyPack 提高打包速度

    前端开发中，我们通常使用 Webpack 来打包我们的代码，将许多文件合并成一个或者几个文件，并将所有依赖关系都解决掉，方便我们在生产环境中使用。但是，当代码变得越来越大时，Webpack 的打包速度...

    17 天前
  • 使用 Chai.js 测试 JavaScript 的类和继承

    JavaScript 是一种非常流行的编程语言，它在前端开发中广泛应用。在 JavaScript 中，可以使用类和继承来构建复杂的应用程序。在这篇文章中，我们将介绍如何使用 Chai.js 测试 Ja...

    17 天前
  • AngularJS SPA 应用的模块管理技巧

    AngularJS（以下简称 Angular）是一款优秀的前端 MVC/MVVM 框架，支持构建单页面 web 应用（Single Page Application，SPA）。

    17 天前
  • 运用 Fastify 和 Nginx 构建高可用性和负载平衡器

    前言 在前端领域，如何构建高可用性和负载平衡器是一个至关重要的问题。本文将介绍如何运用 Fastify 和 Nginx 构建高可用性和负载平衡器，帮助开发者更好地解决这一问题。

    17 天前
  • Custom Elements 如何正确地使用 CSS Flex 布局？

    Flex 布局是一种强大的 CSS 布局模式，它适用于各种不同的项目。自定义元素是一种完全自定义的 HTML 元素，它可以包括 JavaScript、CSS 和 HTML。

    17 天前
  • 如何自定义 ESLint 编码规范

    随着前端技术的不断发展和更新，代码质量始终是我们关注的重点之一。而 ESLint 是一个可扩展、模块化的 JavaScript 代码检查工具，可以帮助我们规范代码，避免出现一些常见的错误和不良实践。

    17 天前
  • 如何通过 Headless CMS 实现快速迭代？

    在现在这个快节奏的前端开发环境中，要快速迭代你的网站或者应用程序，常常需要使用一些高效的工具。Headless CMS (无头 CMS) 正是这样一种工具，为前端开发人员提供了一种解耦的方式，从而实现...

    17 天前
  • Vue.js 中重置 data 数据的方法

    在 Vue.js 中，我们通常会将数据存储在组件的 data 属性中，并根据需要对其进行修改和访问。但是在某些情况下，我们可能需要重置 data 数据，以便将其还原为初始状态或更改其现有值。

    17 天前
  • 如何在响应式设计中兼容低端设备

    随着移动设备和不同尺寸的屏幕的出现，响应式设计日益成为网页设计的主流趋势。但是，在设计响应式网站时，如何兼容低端设备却是一个问题。本文将介绍一些关键技术和最佳实践，帮助您在设计响应式网站时兼容低端设备...

    17 天前
  • 牢记 Promise 中的 then() 和 catch() 顺序

    对于前端开发人员来说，Promise 已经成为了日常编程中必不可少的部分。Promise 的 then() 方法和 catch() 方法是 Promise 最常用的两个方法。

    17 天前
  • 在 Kubernetes 中安全使用第三方 Docker 镜像的方法

    在 Kubernetes 中，使用 Docker 镜像是非常普遍的操作。然而，不安全的镜像会对集群造成重大威胁。因此，在 Kubernetes 中安全使用第三方 Docker 镜像是非常重要的。

    17 天前
  • 无障碍设计实践：网页键盘访问性与屏幕阅读器适配

    前言 在设计和开发网站时，我们经常会考虑如何使网站更加美观和易用。但是，在这个过程中，我们有时会忽略有些用户可能面临的访问障碍，这些用户可能是视障人士、听障人士、身体残障人士以及长期阅读的用户。

    17 天前
  • 在使用 Custom Elements 时如何正确地使用 CSS 网格布局？

    Custom Elements 是 Web Components 规范的重要组成部分，可以帮助开发者构建可重用和独立的 UI 组件。在使用 Custom Elements 开发 UI 组件时，如何正确...

    17 天前
  • Cypress 测试框架在 CI/CD 流水线自动化测试的最佳实践

    前言 对于前端开发人员来说，自动化测试已经不再是一个选项，而是必不可少的一环。自动化测试能够大幅度提高测试效率，减少测试时间和成本，并且可以有效的帮助我们发现潜在的 bug。

    17 天前
  • JavaScript ES9：新特性快速入门指南

    JavaScript ES9也被称为ECMAScript 2018，是ECMAScript标准第九版的其中一部分，引入了几个新特性和语言功能，为前端开发者提供了更加便捷和高效的编程工具。

    17 天前
  • 在使用 Hapi 框架构建 Node.js 应用时遇到的路由设计问题及解决方式

    引言 Hapi 是一个非常流行的 Node.js Web 框架，它的不同版本已经被广泛应用于生产环境中。这里我们主要讨论在使用 Hapi 时遇到的路由设计问题及解决方式。

    17 天前
  • ES8 新特性：Object 的属性描述符

    在 JavaScript 对象中，每个属性可以具有一些描述符，这些描述符包含了这个属性的特定行为。在 ES8 中，Object 对象增加了一个方便的方法来获取和设置属性描述符。

    17 天前
  • 基于 GraphQL 的后端数据模拟技术

    GraphQL 是一种由 Facebook 开发的数据查询语言。它允许客户端指定它需要哪些数据，从而避免传输不必要的数据。GraphQL 已经成为了很多前端应用程序的首选技术，因为它可以大大提高应用的...

    17 天前
  • ECMAScript 2016：解析模板字符串中嵌套的模板字符串

    作为前端开发者，我们常常需要使用模板字符串来生成动态的 HTML 或其他文本内容。而在 ECMAScript 2015 中推出的模板字符串就为我们提供了这样的功能，它能够让我们直接在字符串中嵌入表达式...

    17 天前
  • 如何应对 PWA 的兼容性问题

    随着 PWA 的不断普及，越来越多的网站开始采用 PWA 技术。但是，由于各种原因，PWA 在不同平台和浏览器上的兼容性不尽相同，这给前端开发者带来了不小的挑战。本篇文章将介绍 PWA 兼容性问题的原...

    17 天前

相关推荐

    暂无文章