babel-plugin-transform-typescript-metadata

Babel plugin to emit decorator metadata like typescript compiler

Motivation

TypeScript Decorators allows advanced reflection patterns when combined with Reflect.metadata output.

Current @babel/preset-typescript implementation however just strips all types and does not emit the relative Metadata in the output code.

Since this kind of information is used extensively in libraries like Nest and TypeORM to implement advanced features like Dependency Injection, I've thought it would be awesome to be able to provide the same functionality that TypeScript compiler experimentalDecorators and emitDecoratorMetadata flags provide.

This means that code like:

import { MyService } from './MyService';
import { Configuration } from './Configuration';

@Injectable()
class AnotherService {
  @Inject()
  config: Configuration;

  constructor(private service: MyService) {}
}

will be interpreted like:

import { MyService } from './MyService';
import { Configuration } from './Configuration';

@Injectable()
@Reflect.metadata('design:paramtypes', [MyService])
class AnotherService {
  @Inject()
  @Reflect.metadata('design:type', Configuration)
  config: Configuration;

  constructor(private service: MyService) {}
}

Parameter decorators

Since decorators in typescript supports also Parameters, this plugin also provides support for them, enabling the following syntax:

@Injectable()
class Some {
  constructor(@Inject() private: SomeService);
}

This will be roughly translated to:

// ...
Inject()(Some.prototype, undefined, 0);

Installation

With npm:

npm install --dev --save babel-plugin-transform-typescript-metadata

or with Yarn:

yarn add --dev babel-plugin-transform-typescript-metadata

Usage

With .babelrc:

Note: should be placed before @babel/plugin-proposal-decorators.

{
  "plugins": [
    "babel-plugin-transform-typescript-metadata",
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
    ["@babel/plugin-proposal-class-properties", { "loose": true }],
  ],
  "presets": [
    "@babel/preset-typescript"
  ]
}

Current Pitfalls

• We cannot know if type annotations are just types (i.e. IMyInterface) or concrete values (like classes, etc.). In order to resolve this, we emit the following: typeof Type === 'undefined' ? Object : Type. The code has the advantage of not throwing If you know a better way to do this, let me know!

• Parameter decorators are emitted right after the ClassDeclaration node, like:

  let A = (/* ... */)
  Inject()(A.prototype, 'methodName', 1);

  I'm not sure if this can cause issue with scoping, if you get in troubles with this kind of decorators, please open an issue.