很久之前初学 Java 时就对注解及自动依赖注入这种方式感觉到不可思议，但是一直没有勇气（懒）去搞清楚。现在做前端了，发现 Nest.js 里面竟然也是这玩意，终究还是躲不过，那就趁着“阳康”了搞清楚一下吧。
关于为什么要进行依赖注入这里就不展开了，下面直接进入正题，TypeScript 依赖注入的原理。
TypeScript 依赖注入的原理
TypeScript 中实现依赖注入离不开 Decorator 和 Metadata（需要引入第三方库 reflect-metadata），下面通过一个简单的例子来快速了解它的用途：
|
1 2 3 4 5 6 7 8 9 10 |
import 'reflect-metadata' @Reflect.metadata('class', 'Class Data') class Test { @Reflect.metadata('method', 'Method Data') public hello(): string { return 'hello world' } } console.log(Reflect.getMetadata('class', Test)) // Class Data console.log(Reflect.getMetadata('method', new Test(), 'hello')) // Method Data |
通过例子可以看到，我们通过 Reflect.metadata() 这个装饰器可以往类及其方法上面添加数据，然后通过 Reflect.getMetadata 可以取到这些数据。我们可以借助这一特性，实现简单的依赖注入：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
import 'reflect-metadata' class TestService {} @Reflect.metadata('params', [TestService]) class Test { constructor(testService: TestService) {} public hello(): string { return 'hello world' } } type Constructor<T = any> = new (...args: any[]) => T const inject = <T>(target: Constructor<T>): T => { const providers = Reflect.getMetadata('params', target) const args = providers.map((provider: Constructor) => new provider()) return new target(...args) } inject(Test).hello() |
如上所示，我们通过 @Reflect.metadata('params', [TestService]) 在 Test 上添加了元数据，表示构造函数中需要用到 TestService，但 Nest.js 中好像不需要这样。怎么办呢？答案就是：
|
1 2 3 4 5 |
{ "compilerOptions": { "emitDecoratorMetadata": true } } |
开启了这个参数后，我们就不需要手动添加元数据了：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
import 'reflect-metadata' class TestService {} const D = (): ClassDecorator => (target) => {} @D() class Test { constructor(testService: TestService) {} public hello(): string { return 'hello world' } } type Constructor<T = any> = new (...args: any[]) => T const inject = <T>(target: Constructor<T>): T => { const providers = Reflect.getMetadata('design:paramtypes', target) const args = providers.map((provider: Constructor) => new provider()) return new target(...args) } inject(Test).hello() |
原因在于开启 emitDecoratorMetadata 后，TS 自动会在我们的装饰器前添加一些装饰器。比如，下面这段代码：
|
1 2 3 4 5 6 7 8 9 10 11 12 |
import 'reflect-metadata' const D = (): ClassDecorator => (target) => {} const methodDecorator = (): MethodDecorator => (target, key, descriptor) => {} @D() class Test { constructor(a: number) {} @methodDecorator() public hello(): string { return 'hello world' } public hi() {} } |
编译过后是这样子的：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
var __decorate = ... var __metadata = ... import 'reflect-metadata' const D = () => (target) => {} const methodDecorator = () => (target, key, descriptor) => {} let Test = class Test { constructor(a) {} hello() { return 'hello world' } hi() {} } __decorate( [ methodDecorator(), __metadata('design:type', Function), __metadata('design:paramtypes', []), __metadata('design:returntype', String), ], Test.prototype, 'hello', null ) Test = __decorate( [D(), __metadata('design:paramtypes', [Number])], Test ) |
可以看到，TS 自动会添加 design:type|paramtypes|returntype 三种类型的元数据，分别表示目标本身，参数以及返回值的类型。
我们把 inject 稍微改一下，支持递归的注入，这样一个简单的依赖注入就实现了：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
import 'reflect-metadata' const D = (): ClassDecorator => (target) => {} class OtherService {} @D() class TestService { constructor(otherService: OtherService) {} } @D() class Test { constructor(testService: TestService) {} public hello(): string { return 'hello world' } } type Constructor<T = any> = new (...args: any[]) => T const inject = <T>(target: Constructor<T>): T => { const providers = Reflect.getMetadata('design:paramtypes', target) if (providers) { const args = providers.map((provider: Constructor) => { return inject(provider) }) return new target(...args) } return new target() } inject(Test).hello() |
接下来，我们浅看一下 Nest.js 大概是怎么实现的。
浅析 Nest.js 实现依赖注入的过程
我们通过官方脚手架生成一个 Demo 项目，可以发现其中 tsconfig.json 中的 emitDecoratorMetadata 确实是开启的。我们先用一个最简单的例子来说明：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
// app.module.ts import {Injectable, Module} from '@nestjs/common' @Injectable() class TestService { hello() { return 'hello world' } } @Module({ providers: [TestService], }) export class AppModule { constructor(testService: TestService) { testService.hello() } } // main.ts import {NestFactory} from '@nestjs/core' import {AppModule} from './app.module' async function bootstrap() { await NestFactory.create(AppModule) } bootstrap() |
为了更加直观的理解流程，这里暂时先把源码核心部分扒下来，我们把 await NestFactory.create(AppModule) 替换成我们自己的代码：
|
1 2 |
const injector = new Injector() await injector.inject(AppModule) |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
import {Type} from '@nestjs/common' import {MODULE_METADATA} from '@nestjs/common/constants' import {ApplicationConfig, NestContainer} from '@nestjs/core' import {InstanceLoader} from '@nestjs/core/injector/instance-loader' export default class Injector { container: NestContainer public async inject(module: any) { const applicationConfig = new ApplicationConfig() this.container = new NestContainer(applicationConfig) const moduleInstance = await this.container.addModule(module, null) // 1 resolve dependencies const {token, metatype} = moduleInstance this.reflectProviders(metatype, token) // 2 create instance const instanceLoader = new InstanceLoader(this.container) instanceLoader.createInstancesOfDependencies() } public reflectProviders(module: Type<any>, token: string) { const providers = [ ...this.reflectMetadata(MODULE_METADATA.PROVIDERS, module), ] providers.forEach((provider) => { return this.container.addProvider(provider as Type<any>, token) }) } public reflectMetadata(metadataKey: string, metatype: Type<any>) { return Reflect.getMetadata(metadataKey, metatype) || [] } } |
这里大概分成两部分：
- 处理 module 的依赖，也就是 @Module 装饰器所声明的，我们这里暂时只考虑 providers。这一步执行完后，NestContainer 中数据如下（注意到 Module 本身也作为自己的 provider）：
|
1 2 3 4 5 6 7 8 9 10 11 |
{ modules: { '19bb8f429cacdbcc18fc1afcaac891a4606578aa': Module { _metatype: class AppModule {...}, _providers: { class AppModule {...}: InstanceWrapper {}, // Module 本身也作为自己的 provider class TestService {...}: InstanceWrapper {} } } } } |
- 实例化 Module。这一部分需要稍微看一下源码：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
public async createInstancesOfDependencies( modules: Map<string, Module> = this.container.getModules(), ) { ... await this.createInstances(modules); } ... private async createInstances(modules: Map<string, Module>) { await Promise.all( [...modules.values()].map(async moduleRef => { await this.createInstancesOfProviders(moduleRef); ... }), ); } |
这里的意思是实例化所有的 Module，实例化 Module 前，我们需要先实例化它的依赖，具体到这里就是实例化 providers：
|
1 2 3 4 5 6 7 |
private async createInstancesOfProviders(moduleRef: Module) { const { providers } = moduleRef; const wrappers = [...providers.values()]; await Promise.all( wrappers.map(item => this.injector.loadProvider(item, moduleRef)), ); } |
最后会到 loadInstance 这个函数：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
public async loadInstance<T>( wrapper: InstanceWrapper<T>, collection: Map<InstanceToken, InstanceWrapper>, moduleRef: Module, contextId = STATIC_CONTEXT, inquirer?: InstanceWrapper, ) { ... try { const callback = async (instances: unknown[]) => { const properties = await this.resolveProperties( wrapper, moduleRef, inject as InjectionToken[], contextId, wrapper, inquirer, ); const instance = await this.instantiateClass( instances, wrapper, targetWrapper, contextId, inquirer, ); this.applyProperties(instance, properties); done(); }; await this.resolveConstructorParams<T>( wrapper, moduleRef, inject as InjectionToken[], callback, contextId, wrapper, inquirer, ); } catch (err) { done(err); throw err; } } |
接下来就到了最重要的 this.resolveConstructorParams 这个函数了，我们以 class AppModule 这个 provider 为例来分析：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
public async resolveConstructorParams<T>( wrapper: InstanceWrapper<T>, moduleRef: Module, inject: InjectorDependency[], callback: (args: unknown[]) => void | Promise<void>, contextId = STATIC_CONTEXT, inquirer?: InstanceWrapper, parentInquirer?: InstanceWrapper, ) { // dependencies 返回的就是 AppModule 构造函数的参数类型，本例为： [TestService] const [dependencies, optionalDependenciesIds] = isFactoryProvider ? this.getFactoryProviderDependencies(wrapper) : this.getClassDependencies(wrapper); let isResolved = true; const resolveParam = async (param: unknown, index: number) => { ... }; // 这里的 instances 就是通过 dependencies 实例化后的对象，具体到本例，可以理解为这样： [new TestService()] const instances = await Promise.all(dependencies.map(resolveParam)); isResolved && (await callback(instances)); } |
其中调用 this.getClassDependencies(wrapper) 最终会调用 reflectConstructorParams：
|
1 2 3 4 5 6 |
public reflectConstructorParams<T>(type: Type<T>): any[] { const paramtypes = Reflect.getMetadata(PARAMTYPES_METADATA, type) || []; const selfParams = this.reflectSelfParams<T>(type); selfParams.forEach(({ index, param }) => (paramtypes[index] = param)); return paramtypes; } |
这里的 PARAMTYPES_METADATA 就是 design:paramtypes。
终于看到了我们想要的结果，那本文暂时就分析到这里吧，这样一次带着一个问题看源码，目标明确，不至于陷入源码的汪洋大海之中。
总结
本文先通过几个简单的例子揭示了 TS 中如何实现依赖注入，核心原理在于通过 Decorator 及 Metadata 两大特性可以在类及其方法上存储一些数据，并且开启了 emitDecoratorMetadata 后，TS 还可以自动添加三种类型的数据。
然后简单地调试了 Nest.js 的初始化过程，发现原理与我们分析的类似。
