Gathering detailed insights and metrics for babel-plugin-transform-typescript-metadata
Gathering detailed insights and metrics for babel-plugin-transform-typescript-metadata
Gathering detailed insights and metrics for babel-plugin-transform-typescript-metadata
Gathering detailed insights and metrics for babel-plugin-transform-typescript-metadata
babel-plugin-reactgenie
Replacement of babel-plugin-transform-typescript-metadata for ReactGenie
babel-plugin-transform-typescript-metadata-macro
Babel plugin to emit decorator metadata like typescript compiler
@loong-js/babel-plugin-transform-typescript-metadata
Babel plugin to emit decorator metadata like typescript compiler
@sirenko/babel-plugin-transform-typescript-metadata
Babel plugin to emit decorator metadata like typescript compiler
Babel plugin to emit decorator metadata like typescript compiler
npm install babel-plugin-transform-typescript-metadata
Typescript
Module System
Node Version
NPM Version
99.3
Supply Chain
99
Quality
75.5
Maintenance
100
Vulnerability
100
License
JavaScript (53.52%)
TypeScript (46.48%)
Total Downloads
191,492,693
Last Day
69,352
Last Week
2,004,273
Last Month
8,511,378
Last Year
86,443,358
MIT License
218 Stars
82 Commits
17 Forks
3 Watchers
8 Branches
4 Contributors
Updated on Mar 03, 2025
Minified
Minified + Gzipped
Latest Version
0.3.2
Package Id
babel-plugin-transform-typescript-metadata@0.3.2
Size
9.10 kB
NPM Version
6.14.4
Node Version
12.16.3
Published on
Mar 19, 2021
Cumulative downloads
Total Downloads
Last Day
7.5%
69,352
Compared to previous day
Last Week
-5.8%
2,004,273
Compared to previous week
Last Month
2.6%
8,511,378
Compared to previous month
Last Year
45.6%
86,443,358
Compared to previous year
1
19
Babel plugin to emit decorator metadata like typescript compiler
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:
1import { Injectable, Inject } from 'some-di-library'; // Just an example 2import { MyService } from './MyService'; 3import { Configuration } from './Configuration'; 4 5@Injectable() 6class AnotherService { 7 @Inject() 8 config: Configuration; 9 10 constructor(private service: MyService) {} 11}
will be interpreted like:
1import { MyService } from './MyService'; 2import { Configuration } from './Configuration'; 3 4@Injectable() 5@Reflect.metadata('design:paramtypes', [MyService]) 6class AnotherService { 7 @Inject() 8 @Reflect.metadata('design:type', Configuration) 9 config: Configuration; 10 11 constructor(private service: MyService) {} 12}
Since decorators in typescript supports also Parameters, this plugin also provides support for them, enabling the following syntax:
1@Injectable() 2class Some { 3 constructor(@Inject() private: SomeService); 4}
This will be roughly translated to:
1// ... 2Inject()(Some.prototype, undefined, 0);
With npm:
1npm install --dev --save babel-plugin-transform-typescript-metadata
or with Yarn:
1yarn add --dev babel-plugin-transform-typescript-metadata
With .babelrc
:
Note: should be placed before
@babel/plugin-proposal-decorators
.
1{ 2 "plugins": [ 3 "babel-plugin-transform-typescript-metadata", 4 ["@babel/plugin-proposal-decorators", { "legacy": true }], 5 ["@babel/plugin-proposal-class-properties", { "loose": true }], 6 ], 7 "presets": [ 8 "@babel/preset-typescript" 9 ] 10}
If you are using normal dependency injection letting Inversify create your instances, you should be fine with all kind of decorators.
Instead, if you are using property injection, when the container does not create the instances, you would likely encounter errors since babel decorators are not exactly the same as TypeScript.
You can fix it by enhancing property decorators with the following function:
1import getDecorators from 'inversify-inject-decorators'; 2// setup the container... 3let { lazyInject: originalLazyInject } = getDecorators(container); 4 5// Additional function to make properties decorators compatible with babel. 6function fixPropertyDecorator<T extends Function>(decorator: T): T { 7 return ((...args: any[]) => ( 8 target: any, 9 propertyName: any, 10 ...decoratorArgs: any[] 11 ) => { 12 decorator(...args)(target, propertyName, ...decoratorArgs); 13 return Object.getOwnPropertyDescriptor(target, propertyName); 14 }) as any; 15} 16 17export const lazyInject = fixPropertyDecorator(originalLazyInject);
If you are using webpack and it complains about missing exports due to types
not being removed, you can switch from import { MyType } from ...
to
import type { MyType } from ...
. See #46 for details and
examples.
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!
No vulnerabilities found.
Reason
no dangerous workflow patterns detected
Reason
no binaries found in the repo
Reason
license file detected
Details
Reason
Found 4/14 approved changesets -- score normalized to 2
Reason
detected GitHub workflow tokens with excessive permissions
Details
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
dependency not pinned by hash detected -- score normalized to 0
Details
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
Reason
project is not fuzzed
Details
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
Reason
58 existing vulnerabilities detected
Details
Score
Last Scanned on 2025-06-23
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More