”工欲善其事,必先利其器。“—孔子《论语.录灵公》
首页 > 编程 > TypeScript 中的 TSyringe 和依赖注入

TypeScript 中的 TSyringe 和依赖注入

发布于2024-10-31
浏览:249

TSyringe and Dependency Injection in TypeScript

我不太喜欢像 NestJS 这样的大型框架;我一直喜欢以我想要的方式构建我的软件的自由,以及我以轻量级方式决定的结构。但在测试 NestJS 时我喜欢的是依赖注入。

依赖注入(DI)是一种设计模式,它允许我们通过消除创建和管理类依赖关系的责任来开发松散耦合的代码。这种模式对于编写可维护、可测试和可扩展的应用程序至关重要。在 TypeScript 生态系统中,TSyringe 作为一个强大且轻量级的依赖注入容器脱颖而出,它简化了这个过程。

TSyringe 是一个用于 TypeScript/JavaScript 应用程序的轻量级依赖注入容器。由 Microsoft 在其 GitHub (https://github.com/microsoft/tsyringe) 上维护,它使用装饰器进行构造函数注入。然后,它使用控制反转容器来存储基于令牌的依赖项,您可以用该令牌交换实例或值。

了解依赖注入

在深入了解 TSyringe 之前,我们先简要探讨一下什么是依赖注入以及它为何如此重要。

依赖注入是一种技术,对象从外部源接收其依赖项,而不是自己创建它们。这种方法有几个好处:

  1. 改进的可测试性:可以在单元测试中轻松模拟或存根依赖项。
  2. 增加模块化:组件更加独立,可以轻松更换或更新。
  3. 更好的代码可重用性:可以在应用程序的不同部分之间共享依赖关系。
  4. 增强的可维护性:依赖项的更改对依赖代码的影响最小。

设置 TSyringe

首先,让我们在您的 TypeScript 项目中设置 TSyringe:

npm install tsyringe reflect-metadata

在 tsconfig.json 中,确保有以下选项:

{
  "compilerOptions": {
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true
  }
}

在应用程序的入口点导入反射元数据:

import "reflect-metadata";

您的应用程序的入口点例如是 Next.js 13 上的根布局,也可以是小型 Express 应用程序中的主文件。

使用 TSyringe 实现依赖注入

我们以介绍中的例子为例,添加TSyringe糖:

让我们从适配器开始。

// @/adapters/userAdapter.ts
import { injectable } from "tsyringe"

@injectable()
class UserAdapter {
    constructor(...) {...}

    async fetchByUUID(uuid) {...}
}

注意到 @injectable() 装饰器了吗?是告诉TSyringe这个类可以在运行时注入。

所以我的服务正在使用我们刚刚创建的适配器。让我们将该适配器注入到我的服务中。

// @/core/user/user.service.ts
import { injectable, inject } from "tsyringe"
...

@injectable()
class UserService {
    constructor(@inject('UserAdapter') private readonly userAdapter: UserAdapter) {}

    async fetchByUUID(uuid: string) {
    ...
        const { data, error } = await this.userAdapter.fetchByUUID(uuid);
    ...
    }
}

这里我还使用了 @injectable 装饰器,因为 Service 将被注入到我的命令类中,但我还在构造函数参数中添加了 @inject 装饰器。此装饰器告诉 TSyringe 在运行时为 userAdapter 属性提供令牌 UserAdapter 的实例或值。

最后但并非最不重要的一点是,我的核心的根源:命令类(通常被错误地称为用例)。

// @/core/user/user.commands.ts
import { inject } from "tsyringe"
...

@injectable()
class UserCommands {
    constructor(@inject('UserService') private readonly userService: UserService) {}

    async fetchByUUID(uuid) {
    ...
        const { data, error } = this.userService.fetchByUUID(uuid);
    ...
    }
}

此时,我们已经告诉 TSyringe 将要注入什么以及要在构造函数中注入什么。但我们还没有制作容器来存储依赖项。我们可以通过两种方式做到这一点:

我们可以使用依赖注入注册表创建一个文件:

// @/core/user/user.dependencies.ts
import { container } from "tsyringe"
...

container.register("UserService", {useClass: UserService}) // associate the UserService with the token "UserService"
container.register("UserAdapter", {useClass: UserAdapter}) // associate the UserAdapter with the token "UserAdapter"

export { container }

但是我们也可以使用@registry装饰器。

// @/core/user/user.commands.ts
import { inject, registry, injectable } from "tsyringe"
...

@injectable()
@registry([
    {
        token: 'UserService',
        useClass: UserService
    },
    {
        token: 'UserAdapter',
        useClass: UserAdapter
    },
])
export class UserCommands {
    constructor(@inject('UserService') private readonly userService: UserService) {}

    async fetchByUUID(uuid) {
    ...
        const { data, error } = this.userService.fetchByUUID(uuid);
    ...
    }
}

container.register("UserCommands", { useClass: UserCommands})

export { container }

两种方法各有利弊,但归根结底,这只是一个品味问题。

现在我们的容器已经充满了我们的依赖项,我们可以根据需要使用容器的resolve方法从容器中获取它们。

import { container, UserCommands } from "@/core/user/user.commands"

...
const userCommands = container.resolve("UserCommands")
await userCommands.fetchByUUID(uuid)
...

这个例子非常简单,因为每个类只依赖于另一个类,但我们的服务可能依赖于许多类,依赖注入确实有助于保持一切整洁。

但是等等!别就这样离开我!测试怎么样?

使用 TSyringe 进行测试

我们的注入还可以通过将模拟对象直接发送到我们的依赖项中来帮助我们测试代码。让我们看一个代码示例:

import { container, UserCommands } from "@/core/user/user.commands"

describe("test ftw", () => {
    let userAdapterMock: UserAdapterMock
    let userCommands: UserCommands

    beforeEach(() => {
        userAdapterMock = new UserAdapter()
        container.registerInstance("UserAdapter", userAdapter)
        userCommands = container.resolve("UserCommands")
    });

    ...
});

现在 UserAdapter 令牌包含一个将被注入到依赖类中的模拟。

最佳实践和技巧

  1. 使用接口:为您的依赖项定义接口,使它们易于交换和测试。为了简单起见,我在本文中没有使用接口,但接口就是生命。
  2. 避免循环依赖:构建代码以避免循环依赖,这可能会导致 TSyringe 出现问题。
  3. 使用标记进行命名:不使用字符串文字作为注入标记,而是创建常量标记:

    export const USER_REPOSITORY_TOKEN = Symbol("UserRepository");
    
    
  4. 作用域容器:将作用域容器用于 Web 应用程序中的请求作用域依赖项。

  5. 不要过度使用 DI:并不是所有东西都需要注入。使用 DI 来实现横切关注点和可配置的依赖关系。

如果您已经读到这里,我想说谢谢您的阅读。我希望这篇文章对您有所启发。请记住在实现依赖注入和架构模式时始终考虑项目的特定需求。

点赞和评论反馈是改进的最佳方式。

编码愉快!

版本声明 本文转载于:https://dev.to/gdsources/tsyringe-and-dependency-injection-in-typescript-3i67?1如有侵犯,请联系[email protected]删除
最新教程 更多>
  • 为什么 `justify-content: center` 不将 Flex 容器中的文本居中?
    为什么 `justify-content: center` 不将 Flex 容器中的文本居中?
    带有 justify-content 的非居中文本:center在 Flex 容器中, justify-content 属性使 Flex 项目水平居中,但是它无法直接控制这些项目中的文本。当文本在项目内换行时,它会保留其默认的 text-align: start 值,从而导致文本不居中。Flex 容...
    编程 发布于2024-11-07
  • 情感人工智能和人工智能陪伴:人类与技术关系的未来
    情感人工智能和人工智能陪伴:人类与技术关系的未来
    情感人工智能和人工智能陪伴:人类与技术关系的未来 人工智能(AI)不再只是数据分析或自动化的工具。随着情感人工智能的进步,机器不再只是功能助手,而是演变成情感伴侣。利用情商 (EI) 的人工智能陪伴正在改变我们与技术互动的方式,提供情感支持,减少孤独感,甚至增强心理健康。但这些人工智能伴侣在复制人类...
    编程 发布于2024-11-07
  • ## Go 中的空接口:什么时候它们是个好主意?
    ## Go 中的空接口:什么时候它们是个好主意?
    Go 中空接口的最佳实践:注意事项和用例在 Go 中,空接口(interface{})是一个强大的工具,它允许抽象不同类型。然而,它们的使用引发了关于最佳实践以及何时适合使用它们的问题。空接口的缺点引起的一个担忧是类型安全性的损失。使用空接口时,编译器无法在编译时强制执行类型检查,从而导致潜在的运行...
    编程 发布于2024-11-07
  • Tailwindcss 不是 Bootstrap 也不是 Materialize
    Tailwindcss 不是 Bootstrap 也不是 Materialize
    Tailwind CSS 席卷了 Web 开发世界?️,但对其本质的误解仍然存在。在最近的一次设计系统规划讨论中,当一位同事随意将 Tailwind CSS 与 Bootstrap 和 Materialise 进行比较时,我差点没喝茶☕(对不起,我不喝咖啡)。这个令人震惊的发现就像发现我的猫认为自己...
    编程 发布于2024-11-07
  • 星期三链接 - 第 8 版
    星期三链接 - 第 8 版
    Java 23 已经到来,它带来了大量的变化! (35 分钟)? https://foojay.io/today/java-23-has-arrived-and-it-brings-a-truckload-of-changes/ Java 23 中的模式、instanceof 和 switch 中的...
    编程 发布于2024-11-07
  • 在 Fedora 24 服务器和工作站上使用 MariaDB 和 PHP/PHP-FPM 设置 Nginx
    在 Fedora 24 服务器和工作站上使用 MariaDB 和 PHP/PHP-FPM 设置 Nginx
    托管网站和在线应用程序需要设置 Web 服务器基础设施。在本文中,我们将尝试使用 MariaDB 和 PHP/PHP-FPM 了解在 Fedora 24 服务器和工作站上设置 Nginx。这种组合创建了一个强大的堆栈来管理数据库和呈现动态内容。这里介绍的主要概念可以应用于 Fedora 或其他 Li...
    编程 发布于2024-11-07
  • 使用 React Hooks 和事件监听器时,为什么状态控制台日志显示错误信息?
    使用 React Hooks 和事件监听器时,为什么状态控制台日志显示错误信息?
    事件监听器和React Hooks问题:使用React hooks和事件监听器时,状态控制台日志显示不正确的信息。 问题描述考虑提供的CodeSandbox: https://codesandbox.io/s/lrxw1wr97m。当您单击“添加卡”按钮两次,然后单击第一张卡中的“Button1”时...
    编程 发布于2024-11-07
  • 如何用Javascript实现IFRAME加载完成时的回调?
    如何用Javascript实现IFRAME加载完成时的回调?
    使用 Javascript 回调加载 Iframe要在 IFRAME 完成加载时执行回调,请按照以下步骤操作:创建 IFRAME 和加载处理程序创建 IFRAME以编程方式:var iFrameObj = document.createElement('IFRAME'); iFrameObj.src...
    编程 发布于2024-11-07
  • 如何管理部署到子文件夹的 MVC 应用程序的 URL 修改?
    如何管理部署到子文件夹的 MVC 应用程序的 URL 修改?
    了解应用程序子文件夹的 URL 修改在开发部署到子文件夹的 MVC 应用程序时,必须适应应用程序子文件夹的更改基本网址。这可确保 JavaScript 引用和 URL 在本地和部署环境中正常运行。确定应用程序根的解决方案要确定根 URL 并相应地修改 JavaScript,有两种方法:简单方法:利用...
    编程 发布于2024-11-07
  • 如何将具有已知和未知键/值对的 JSON 解析为 Go 结构?
    如何将具有已知和未知键/值对的 JSON 解析为 Go 结构?
    使用任意键/值对解组 JSON 到结构问题如何解析具有已知和未知键/值对的 JSON 字符串进入 Go 结构体?未知字段可以具有任何名称和值类型(字符串、布尔、float64 或 int)。解决方案使用已知字段和未知字段的映射切片创建一个结构体:type Message struct { K...
    编程 发布于2024-11-07
  • [Go][Excelize] 确定单元格值是否有删除线
    [Go][Excelize] 确定单元格值是否有删除线
    简介 我想确定单元格的值是否有删除线。 确定单元格的值是否有删除线 要确定单元格的值是否有删除线,我必须通过两种方式获取单元格样式。 如果只有单元格的某些值被删除,如“A1”,我应该从“excelize.RichTextRun”获取单元格样式。 如果单元格中的所有值...
    编程 发布于2024-11-07
  • php:与进程的并发。角与 shmop 的进程间通信
    php:与进程的并发。角与 shmop 的进程间通信
    php isn't the sort of language where developers usually think about things like memory. we just sort of sling around variables and functions and let t...
    编程 发布于2024-11-07
  • Kotlin vs. Java:Android 开发终极指南 4
    Kotlin vs. Java:Android 开发终极指南 4
    说到 Android 开发,争论最多的话题之一是 Kotlin 和 Java 之间的选择。两者都是功能强大的语言,各有优缺点,并且决策可以显着影响开发过程和最终产品。本博客将深入探讨 Kotlin 和 Java 的细微差别,从各个方面对它们进行比较,以帮助您决定哪种语言最适合您的 Android 开...
    编程 发布于2024-11-07
  • 使用 Spring Boot 构建您的第一个微服务系统:初学者指南
    使用 Spring Boot 构建您的第一个微服务系统:初学者指南
    Introduction In this guide, we'll walk through the creation of a simple yet comprehensive microservices system using Spring Boot. We will cov...
    编程 发布于2024-11-07
  • POST 请求能否触发后退按钮确认警报以及如何抑制它们?
    POST 请求能否触发后退按钮确认警报以及如何抑制它们?
    防止按后退按钮时出现 POST 确认警报通过 Web 表单提交大量参数时,经常使用 POST 请求而不是获取。但是,当用户在页面显示后单击“后退”按钮时,Firefox 会显示确认警报。此警报警告 Firefox 将重新发送可能会重复先前操作的信息,例如搜索或订单确认。虽然此行为可能旨在防止意外重复...
    编程 发布于2024-11-07

免责声明: 提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发到邮箱:[email protected] 我们会第一时间内为您处理。

Copyright© 2022 湘ICP备2022001581号-3