Reflect Metadata

基础

Reflect Metadata 是 ES7 的一个提案，它主要用来在声明的时候添加和读取元数据。TypeScript 在 1.5+ 的版本已经支持它，你只需要：

  • npm i reflect-metadata —save。
  • 在 tsconfig.json 里配置 emitDecoratorMetadata 选项。
    Reflect Metadata 的 API 可以用于类或者类的属性上，如：
  1. function metadata(
  2.   metadataKey: any,
  3.   metadataValue: any
  4. ): {
  5.   (target: Function): void;
  6.   (target: Object, propertyKey: string | symbol): void;
  7. };

Reflect.metadata 当作 Decorator 使用，当修饰类时，在类上添加元数据，当修饰类属性时，在类原型的属性上添加元数据，如：

  1. @Reflect.metadata('inClass', 'A')
  2. class Test {
  3.   @Reflect.metadata('inMethod', 'B')
  4.   public hello(): string {
  5.     return 'hello world';
  6.   }
  7. }
  9. console.log(Reflect.getMetadata('inClass', Test)); // 'A'
  10. console.log(Reflect.getMetadata('inMethod', new Test(), 'hello')); // 'B'

它具有诸多使用场景。

获取类型信息

譬如在 vue-property-decorator 6.1 及其以下版本中，通过使用 Reflect.getMetadata API，Prop Decorator 能获取属性类型传至 Vue，简要代码如下：

  1. function Prop(): PropertyDecorator {
  2.   return (target, key: string) => {
  3.     const type = Reflect.getMetadata('design:type', target, key);
  4.     console.log(`${key} type: ${type.name}`);
  5.     // other...
  6.   };
  7. }
  9. class SomeClass {
  10.   @Prop()
  11.   public Aprop!: string;
  12. }

运行代码可在控制台看到 Aprop type: string。除能获取属性类型外，通过 Reflect.getMetadata("design:paramtypes", target, key) 和 Reflect.getMetadata("design:returntype", target, key) 可以分别获取函数参数类型和返回值类型。

自定义 metadataKey

除能获取类型信息外，常用于自定义 metadataKey，并在合适的时机获取它的值，示例如下：

  1. function classDecorator(): ClassDecorator {
  2.   return target => {
  3.     // 在类上定义元数据，key 为 `classMetaData`，value 为 `a`
  4.     Reflect.defineMetadata('classMetaData', 'a', target);
  5.   };
  6. }
  8. function methodDecorator(): MethodDecorator {
  9.   return (target, key, descriptor) => {
  10.     // 在类的原型属性 'someMethod' 上定义元数据，key 为 `methodMetaData`，value 为 `b`
  11.     Reflect.defineMetadata('methodMetaData', 'b', target, key);
  12.   };
  13. }
  15. @classDecorator()
  16. class SomeClass {
  17.   @methodDecorator()
  18.   someMethod() {}
  19. }
  21. Reflect.getMetadata('classMetaData', SomeClass); // 'a'
  22. Reflect.getMetadata('methodMetaData', new SomeClass(), 'someMethod'); // 'b'

例子

控制反转和依赖注入

在 Angular 2+ 的版本中，控制反转与依赖注入便是基于此实现，现在，我们来实现一个简单版：

  1. type Constructor<T = any> = new (...args: any[]) => T;
  3. const Injectable = (): ClassDecorator => target => {};
  5. class OtherService {
  6.   a = 1;
  7. }
  9. @Injectable()
  10. class TestService {
  11.   constructor(public readonly otherService: OtherService) {}
  13.   testMethod() {
  14.     console.log(this.otherService.a);
  15.   }
  16. }
  18. const Factory = <T>(target: Constructor<T>): T => {
  19.   // 获取所有注入的服务
  20.   const providers = Reflect.getMetadata('design:paramtypes', target); // [OtherService]
  21.   const args = providers.map((provider: Constructor) => new provider());
  22.   return new target(...args);
  23. };
  25. Factory(TestService).testMethod(); // 1

Controller 与 Get 的实现

如果你在使用 TypeScript 开发 Node 应用，相信你对 Controller、Get、POST 这些 Decorator，并不陌生：

  1. @Controller('/test')
  2. class SomeClass {
  3.   @Get('/a')
  4.   someGetMethod() {
  5.     return 'hello world';
  6.   }
  8.   @Post('/b')
  9.   somePostMethod() {}
  10. }

这些 Decorator 也是基于 Reflect Metadata 实现，这次，我们将 metadataKey 定义在 descriptor 的 value 上：

  1. const METHOD_METADATA = 'method'；
  2. const PATH_METADATA = 'path'；
  4. const Controller = (path: string): ClassDecorator => {
  5.   return target => {
  6.     Reflect.defineMetadata(PATH_METADATA, path, target);
  7.   }
  8. }
  10. const createMappingDecorator = (method: string) => (path: string): MethodDecorator => {
  11.   return (target, key, descriptor) => {
  12.     Reflect.defineMetadata(PATH_METADATA, path, descriptor.value);
  13.     Reflect.defineMetadata(METHOD_METADATA, method, descriptor.value);
  14.   }
  15. }
  17. const Get = createMappingDecorator('GET');
  18. const Post = createMappingDecorator('POST');

接着，创建一个函数，映射出 route：

  1. function mapRoute(instance: Object) {
  2.   const prototype = Object.getPrototypeOf(instance);
  4.   // 筛选出类的 methodName
  5.   const methodsNames = Object.getOwnPropertyNames(prototype)
  6.                               .filter(item => !isConstructor(item) && isFunction(prototype[item]))；
  7.   return methodsNames.map(methodName => {
  8.     const fn = prototype[methodName];
  10.     // 取出定义的 metadata
  11.     const route = Reflect.getMetadata(PATH_METADATA, fn);
  12.     const method = Reflect.getMetadata(METHOD_METADATA, fn)；
  13.     return {
  14.       route,
  15.       method,
  16.       fn,
  17.       methodName
  18.     }
  19.   })
  20. };

因此，我们可以得到一些有用的信息：

  1. Reflect.getMetadata(PATH_METADATA, SomeClass); // '/test'
  3. mapRoute(new SomeClass());
  5. /**
  6.  * [{
  7.  *    route: '/a',
  8.  *    method: 'GET',
  9.  *    fn: someGetMethod() { ... },
  10.  *    methodName: 'someGetMethod'
  11.  *  },{
  12.  *    route: '/b',
  13.  *    method: 'POST',
  14.  *    fn: somePostMethod() { ... },
  15.  *    methodName: 'somePostMethod'
  16.  * }]
  17.  *
  18.  */

最后，只需把 route 相关信息绑在 express 或者 koa 上就 ok 了。

原文: https://jkchao.github.io/typescript-book-chinese/tips/metadata.html