用TypeScript装饰器实现一个简单的依赖注入

导语: 在我们的代码中，依赖就是两个模块间的一种关联（如两个类）——往往是其中的一个模块使用另外一个模块去做些事情。使用依赖注入降低模块之间的耦合度，使代码更简洁。

开始之前

什么是依赖（Dependency）

有两个元素A、B，如果元素A的变化会引起元素B的变化，则称元素B依赖（Dependency）于元素A。在类中，依赖关系有多种表现形式，如：一个类向另一个类发消息；一个类是另一个类的成员；一个类是另一个类的某个操作参数，等等。

为什么要依赖注入（DI）

我们先定义四个Class，车，车身，底盘，轮胎。然后初始化这辆车，最后跑这辆车。　　假设我们需要改动一下轮胎（Tire）类，把它的尺寸变成动态的，而不是一直都是30。　　由于我们修改了轮胎的定义，为了让整个程序正常运行，我们需要做以下改动：　　由此我们可以看到，仅仅是为了修改轮胎的构造函数，这种设计却需要修改整个上层所有类的构造函数！在软件工程中，这样的设计几乎是不可维护的。　　所以我们需要进行控制反转（IoC），即上层控制下层，而不是下层控制着上层。我们用依赖注入（Dependency Injection） 这种方式来实现控制反转。所谓依赖注入，就是把底层类作为参数传入上层类，实现上层类对下层类的“控制”。

　　这里我们用构造方法传递的依赖注入方式重新写车类的定义：这里我只需要修改轮胎类就行了，不用修改其他任何上层类。这显然是更容易维护的代码。不仅如此，在实际的工程中，这种设计模式还有利于不同组的协同合作和单元测试。

环境配置

安装 typescript 环境以及重要的 polyfill reflect-metadata。
在 tsconfig.json 中配置 compilerOptions

{
    "experimentalDecorators": true, // 开启装饰器
    "emitDecoratorMetadata": true, // 开启元编程
}

同时在入口文件引入 reflect-metadata。

预备知识

Reflect

简介

Proxy 与 Reflect 是 ES6 为了操作对象引入的 API，Reflect 的 API 和 Proxy 的 API 一一对应，并且可以函数式的实现一些对象操作。另外，使用 reflect-metadata 可以让 Reflect 支持元编程。

参考资料

Reflect - JavaScript | MDN

Metadata Proposal - ECMAScript

类型获取

类型元数据：design:type
参数类型元数据：design:paramtypes
返回类型元数据：design:returntype

使用方法

/** 
 * target: Object
 * propertyKey?: string | symbol
 */
Reflect.getMetadata('design:type', target, propertyKey); // 获取被装饰属性的类型
Reflect.getMetadata("design:paramtypes", target, propertyKey); // 获取被装饰的参数类型
Reflect.getMetadata("design:returntype", target, propertyKey); // 获取被装饰函数的返回值类型

正式开始

编写模块

首先写一个服务提供者，作为被依赖模块:

// @services/log.ts
class LogService {
  public debug(...args: any[]): void {
    console.debug('[DEB]', new Date(), ...args);
  }

  public info(...args: any[]): void {
    console.info('[INF]', new Date(), ...args);
  }

  public error(...args: any[]): void {
    console.error('[ERR]', new Date(), ...args);
  }
}

然后我们再写一个消费者：

// @controllers/custom.ts
import LogService from '@services/log';

class CustomerController {
  private log!: LogService;
  private token = "29993b9f-de22-44b5-87c3-e209f4174e39";

  constructor() {
    this.log = new LogService();
  }

  public main(): void {
    this.log.info('Its running.');
  }
}

现在我们看到，消费者在constructor构造函数内对LogService进行了实例化，并在main函数内进行了调用，这是传统的调用方式。

当LogService变更，修改了构造函数，而这个模块被依赖数很多，我们就得挨个找到引用此模块的部分，并一一修改实例化代码。

架构设计

我们需要用一个Map来存储注册的依赖，并且它的key必须唯一。所以我们首先设计一个容器。
注册依赖的时候尽可能简单，甚至不需要用户自己定义key，所以这里使用Symbol 和唯一字符串来确定一个依赖。
我们注册的依赖不一定是类，也可能是一个函数、字符串、单例，所以要考虑不能使用装饰器的情况。

Container

先来设计一个Container类，它包括ContainerMap、set、get、has属性或方法。ContainerMap用来存储注册的模块，set和get用来注册和读取模块，has用来判断模块是否已经注册。

set 形参 id 表示模块 id， value 表示模块。
get 用于返回指定模块 id 对应的模块。
has 用于判断模块是否注册。

// @libs/di/Container.ts
class Container {
  private ContainerMap = new Map<string | symbol, any>();

  public set = (id: string | symbol, value: any): void => {
    this.ContainerMap.set(id, value);
  }
  
  public get = <T extends any>(id: string | symbol): T => {
    return this.ContainerMap.get(id) as T;
  }

  public has = (id: string | symbol): Boolean => {
    return this.ContainerMap.has(id);
  }
}

const ContainerInstance = new Container();
export default ContainerInstance;

Service

现在实现Service装饰器来注册类依赖。

// @libs/di/Service.ts
import Container from './Container';

interface ConstructableFunction extends Function {
  new (): any;
}

// 自定义 id 初始化
export function Service (id: string): Function;

// 作为单例初始化
export function Service (singleton: boolean): Function;

// 自定义 id 并作为单例初始化
export function Service (id: string, singleton: boolean): Function;

export function Service (idOrSingleton?: string | boolean, singleton?: boolean): Function {
  return (target: ConstructableFunction) => {
    let _id;
    let _singleton;
    let _singleInstance;

    if (typeof idOrSingleton === 'boolean') {
      _singleton = true;
      _id = Symbol(target.name);
    } else {
      // 判断如果设置 id，id 是否唯一
      if (idOrSingleton && Container.has(idOrSingleton)) {
        throw new Error(`Service：此标识符（${idOrSingleton}）已被注册.`);
      }

      _id = idOrSingleton || Symbol(target.name);
      _singleton = singleton;
    }

    Reflect.defineMetadata('cus:id', _id, target);

    if (_singleton) {
      _singleInstance = new target();
    }

    Container.set(_id, _singleInstance || target);
  };
};

Service作为一个类装饰器，id是可选的一个标记模块的变量，singleton是一个可选的标记是否单例的变量，target表示当前要注册的类，拿到这个类之后，给它添加 metadata，方便日后使用。

Inject

接下来实现Inject装饰器用来注入依赖。

// @libs/di/Inject.ts
import Container from './Container';

// 使用 id 定义模块后，需要使用 id 来注入模块
export function Inject(id?: string): PropertyDecorator {
  return (target: Object, propertyKey: string | symbol) => {
    const Dependency = Reflect.getMetadata("design:type", target, propertyKey);

    const _id = id || Reflect.getMetadata("cus:id", Dependency);
    const _dependency = Container.get(_id);

    // 给属性注入依赖
    Reflect.defineProperty(target, propertyKey, {
      value: _dependency,
    });
  };
}

开始使用

服务提供者

log 模块：

// @services/log.ts
import { Service } from '@libs/di';

@Service(true)
class LogService {
  ...
}

config 模块：

// @services/config.ts
import { Container } from '@libs/di';

export const token = '29993b9f-de22-44b5-87c3-e209f4174e39';

// 可在入口文件处调用以载入
export default () => {
  Container.set('token', token);
};

消费者

// @controllers/custom.ts
import LogService from '@services/log';

class CustomerController {
  // 使用 Inject 注入
  @Inject()
  private log!: LogService;

  // 使用 Container.get 注入
  private token = Container.get('token');

  public main(): void {
    this.log.info(this.token);
  }
}

运行结果

[INF] 2020-08-07T11:56:48.775Z 29993b9f-de22-44b5-87c3-e209f4174e39

注意事项

decorator有可能会在正式调用之前初始化，因此Inject步骤可能会在使用Container.set注册之前执行（如上文的 config模块注册和token的注入），此时可以使用Container.get替代。

我们甚至可以让参数注入在constructor形参里面，使用Inject直接在构造函数里注入依赖。当然这就需要自己下去思考了：

constructor(@Inject() log: LogService) {
  this.log = log;
}