十年匠心定制 · 商业建站与技术教学双线并行 咨询热线:400-886-1026 service@lmnt.cn
ARTICLE DETAIL

资讯详情

深耕网站建设与运营推广的一线实战洞察。

InversifyJS入门:10分钟快速搭建TypeScript依赖注入项目的完整指南

InversifyJS入门:10分钟快速搭建TypeScript依赖注入项目的完整指南 InversifyJS入门10分钟快速搭建TypeScript依赖注入项目的完整指南【免费下载链接】InversifyJSPowerful and lightweight inversion of control container. Moved to https://github.com/inversify/monorepo项目地址: https://gitcode.com/gh_mirrors/in/InversifyJSInversifyJS 是一款强大且轻量的TypeScript 依赖注入DI容器也叫控制反转IoC容器。它通过构造函数自动识别并注入类的依赖让你告别手写的new工厂代码。本文面向新手用 10 分钟带你从零搭建一个可运行的 InversifyJS 项目并掌握容器绑定、装饰器注入等核心玩法。1. 为什么需要依赖注入手写new会让代码高度耦合痛点InversifyJS 的解法类之间互相new难以替换实现面向接口编程运行时自由换实现单元测试无法 mock 依赖测试时只需重新绑定一个 mock对象创建逻辑散落各处统一在容器中声明式绑定InversifyJS 的核心设计目标见 README.md帮助开发者写出符合 SOLID 原则的代码推广最佳 OOP 与 IoC 实践尽量少的运行时开销一流的 TypeScript 开发体验2. 安装步骤3 个命令完成配置2.1 克隆仓库或新建项目如果想在本地研究源码克隆仓库仓库是只读的请勿修改git clone https://gitcode.com/gh_mirrors/in/InversifyJS2.2 安装依赖在你的项目中执行npm install inversify npm install reflect-metadata⚠️reflect-metadata是必需的对等依赖版本信息可在 package.json 的peerDependencies字段中查到。2.3 开启 TypeScript 装饰器InversifyJS 基于装饰器工作需要在tsconfig.json中开启两个关键选项参考官方源码的 tsconfig.base.json{ compilerOptions: { experimentalDecorators: true, emitDecoratorMetadata: true, target: ES2022 } }3. 10 分钟写一个最小可运行示例下面 5 步走完 InversifyJS 的完整闭环定义接口 → 声明服务 → 标记可注入 → 绑定 → 解析。第 1 步定义一个接口标识// 用字符串常量作为服务标识 const TYPES { Logger: Symbol.for(Logger), App: Symbol.for(App), };第 2 步编写业务类并用injectable()标记import { inject, injectable, postConstruct } from inversify; interface Logger { log(msg: string): void; } injectable() class ConsoleLogger implements Logger { log(msg: string) { console.log([LOG] ${msg}); } } injectable() class App { constructor(inject(TYPES.Logger) private logger: Logger) {} postConstruct() init() { this.logger.log(应用已启动); } }injectable()告诉容器这个类可以被容器创建inject(TYPES.Logger)指明构造函数参数要注入哪个服务postConstruct()实例创建后自动执行适合做初始化逻辑第 3 步创建容器并绑定import reflect-metadata; // 必须放在入口文件最顶部 import { Container } from inversify; const container new Container(); container.bindLogger(TYPES.Logger).to(ConsoleLogger); container.bindApp(TYPES.App).to(App);第 4 步解析并运行const app container.getApp(TYPES.App); // 输出: [LOG] 应用已启动完成你已经拥有了一个标准的 TypeScript 依赖注入项目骨架。4. 进阶三个常用能力4.1 用 ContainerModule 组织绑定绑定多了以后建议按模块拆分。ContainerModule可以延迟加载、支持取消绑定参考 container_module.test.tsimport { ContainerModule } from inversify; const coreModule new ContainerModule((bind) { bindLogger(TYPES.Logger).to(ConsoleLogger); bindApp(TYPES.App).to(App); }); await container.load(coreModule);4.2 同名服务多实例named多个Logger实现并存时用named区分container.bindLogger(TYPES.Logger).to(FileLogger).whenTargetNamed(file); // 注入端指定名字 constructor(named(file) inject(TYPES.Logger) logger: Logger) {}装饰器冲突规则详见 named.test.ts。4.3 按需创建新实例toFactory默认绑定是单例全局一个实例。需要每次获取新实例时container.bindLogger(TYPES.Logger).toDynamicValue(() new FileLogger()).inRequestScope();完整的解析上下文 API 可在 container.test.ts 中查看。5. 新手必知的 4 个避坑点import reflect-metadata必须最先执行它要在全局注册元数据放晚了会注入失败。官方入口 src/index.ts 第一行就是这样写的。装饰器配置缺一不可experimentalDecorators和emitDecoratorMetadata都要开否则容器读不到类型信息。服务未绑定会直接抛错调用container.get()前服务必须已绑定这是特性而非 bug能帮你尽早发现配置遗漏。injectable()不能重复应用源码在 injectable.test.ts 中有明确的防重复测试。6. 项目目录导览想深入阅读源码可以从这些入口入手库的公共 API 出口src/index.ts容器核心测试绑定/解绑/作用域src/test/container/container.test.ts装饰器行为测试src/test/annotation/特性测试命名注入、多注入、可选注入src/test/features/构建配置rollup.config.mjs 与 tsconfig.base.json版本与发布记录CHANGELOG.md 提示InversifyJS 正在迁移到官方 monorepo后续新版本的 issue 与 PR 建议关注 monorepo 提交。7. 总结时间你学会了0–2 分钟InversifyJS 是什么、解决什么问题2–5 分钟安装依赖、配置装饰器、写入reflect-metadata5–8 分钟绑定、injectable()、inject最小示例8–10 分钟ContainerModule、named、作用域等进阶能力InversifyJS 以极小的体积提供了完整的依赖注入能力配合 TypeScript 的类型系统可以让你的项目在可测试性和可扩展性上更上一层楼。现在就可以打开终端跑通你的第一个 IoC 容器吧【免费下载链接】InversifyJSPowerful and lightweight inversion of control container. Moved to https://github.com/inversify/monorepo项目地址: https://gitcode.com/gh_mirrors/in/InversifyJS创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表