0

0

TypeScript 中的 TSyringe 和依赖注入

花韻仙語

花韻仙語

发布时间:2024-09-25 18:36:39

|

363人浏览过

|

来源于dev.to

转载

typescript 中的 tsyringe 和依赖注入

我不太喜欢像 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 来实现横切关注点和可配置的依赖关系。

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

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

编码愉快!

相关专题

更多
js获取数组长度的方法
js获取数组长度的方法

在js中,可以利用array对象的length属性来获取数组长度,该属性可设置或返回数组中元素的数目,只需要使用“array.length”语句即可返回表示数组对象的元素个数的数值,也就是长度值。php中文网还提供JavaScript数组的相关下载、相关课程等内容,供大家免费下载使用。

557

2023.06.20

js刷新当前页面
js刷新当前页面

js刷新当前页面的方法:1、reload方法,该方法强迫浏览器刷新当前页面,语法为“location.reload([bForceGet]) ”;2、replace方法,该方法通过指定URL替换当前缓存在历史里(客户端)的项目,因此当使用replace方法之后,不能通过“前进”和“后退”来访问已经被替换的URL,语法为“location.replace(URL) ”。php中文网为大家带来了js刷新当前页面的相关知识、以及相关文章等内容

374

2023.07.04

js四舍五入
js四舍五入

js四舍五入的方法:1、tofixed方法,可把 Number 四舍五入为指定小数位数的数字;2、round() 方法,可把一个数字舍入为最接近的整数。php中文网为大家带来了js四舍五入的相关知识、以及相关文章等内容

754

2023.07.04

js删除节点的方法
js删除节点的方法

js删除节点的方法有:1、removeChild()方法,用于从父节点中移除指定的子节点,它需要两个参数,第一个参数是要删除的子节点,第二个参数是父节点;2、parentNode.removeChild()方法,可以直接通过父节点调用来删除子节点;3、remove()方法,可以直接删除节点,而无需指定父节点;4、innerHTML属性,用于删除节点的内容。

478

2023.09.01

JavaScript转义字符
JavaScript转义字符

JavaScript中的转义字符是反斜杠和引号,可以在字符串中表示特殊字符或改变字符的含义。本专题为大家提供转义字符相关的文章、下载、课程内容,供大家免费下载体验。

434

2023.09.04

js生成随机数的方法
js生成随机数的方法

js生成随机数的方法有:1、使用random函数生成0-1之间的随机数;2、使用random函数和特定范围来生成随机整数;3、使用random函数和round函数生成0-99之间的随机整数;4、使用random函数和其他函数生成更复杂的随机数;5、使用random函数和其他函数生成范围内的随机小数;6、使用random函数和其他函数生成范围内的随机整数或小数。

1031

2023.09.04

如何启用JavaScript
如何启用JavaScript

JavaScript启用方法有内联脚本、内部脚本、外部脚本和异步加载。详细介绍:1、内联脚本是将JavaScript代码直接嵌入到HTML标签中;2、内部脚本是将JavaScript代码放置在HTML文件的`<script>`标签中;3、外部脚本是将JavaScript代码放置在一个独立的文件;4、外部脚本是将JavaScript代码放置在一个独立的文件。

658

2023.09.12

Js中Symbol类详解
Js中Symbol类详解

javascript中的Symbol数据类型是一种基本数据类型,用于表示独一无二的值。Symbol的特点:1、独一无二,每个Symbol值都是唯一的,不会与其他任何值相等;2、不可变性,Symbol值一旦创建,就不能修改或者重新赋值;3、隐藏性,Symbol值不会被隐式转换为其他类型;4、无法枚举,Symbol值作为对象的属性名时,默认是不可枚举的。

553

2023.09.20

Python GraphQL API 开发实战
Python GraphQL API 开发实战

本专题系统讲解 Python 在 GraphQL API 开发中的实际应用,涵盖 GraphQL 基础概念、Schema 设计、Query 与 Mutation 实现、权限控制、分页与性能优化,以及与现有 REST 服务和数据库的整合方式。通过完整示例,帮助学习者掌握 使用 Python 构建高扩展性、前后端协作友好的 GraphQL 接口服务,适用于中大型应用与复杂数据查询场景。

1

2026.01.21

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Git 教程
Git 教程

共21课时 | 2.8万人学习

Git版本控制工具
Git版本控制工具

共8课时 | 1.5万人学习

Git中文开发手册
Git中文开发手册

共0课时 | 0人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号