Research
Security News
Quasar RAT Disguised as an npm Package for Detecting Vulnerabilities in Ethereum Smart Contracts
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
babel-plugin-transform-typescript-metadata
Advanced tools
Babel plugin to emit decorator metadata like typescript compiler
babel-plugin-transform-typescript-metadata is a Babel plugin that enables the transformation of TypeScript metadata for use with decorators. This is particularly useful for libraries that rely on metadata reflection, such as dependency injection frameworks.
Transform TypeScript Metadata
This feature allows the transformation of TypeScript metadata, making it available for use with decorators. This is particularly useful for dependency injection frameworks that rely on metadata reflection.
/* .babelrc */
{
"plugins": [
"babel-plugin-transform-typescript-metadata"
]
}
/* Example TypeScript file */
import 'reflect-metadata';
class Example {
constructor(@Inject('MyService') private myService: MyService) {}
}
// After transformation, metadata about the 'myService' parameter will be available
reflect-metadata is a polyfill for the Metadata Reflection API, which is a proposed feature for ECMAScript. It allows for the addition of metadata to class declarations and members. Unlike babel-plugin-transform-typescript-metadata, it does not transform TypeScript code but provides a runtime API for metadata reflection.
tslib is a runtime library for TypeScript that provides helper functions for various TypeScript features, including decorators. While it does not specifically transform TypeScript metadata, it is often used in conjunction with other tools to support TypeScript features in a runtime environment.
inversify is a powerful and lightweight inversion of control (IoC) container for JavaScript and TypeScript apps. It uses decorators and metadata to manage dependencies. While it does not transform TypeScript metadata itself, it relies on metadata reflection to function, making it a complementary tool to babel-plugin-transform-typescript-metadata.
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:
import { Injectable, Inject } from 'some-di-library'; // Just an example
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) {}
}
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);
With npm:
npm install --dev --save babel-plugin-transform-typescript-metadata
or with Yarn:
yarn add --dev babel-plugin-transform-typescript-metadata
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"
]
}
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:
import getDecorators from 'inversify-inject-decorators';
// setup the container...
let { lazyInject: originalLazyInject } = getDecorators(container);
// Additional function to make properties decorators compatible with babel.
function fixPropertyDecorator<T extends Function>(decorator: T): T {
return ((...args: any[]) => (
target: any,
propertyName: any,
...decoratorArgs: any[]
) => {
decorator(...args)(target, propertyName, ...decoratorArgs);
return Object.getOwnPropertyDescriptor(target, propertyName);
}) as any;
}
export 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!
FAQs
Babel plugin to emit decorator metadata like typescript compiler
The npm package babel-plugin-transform-typescript-metadata receives a total of 1,305,230 weekly downloads. As such, babel-plugin-transform-typescript-metadata popularity was classified as popular.
We found that babel-plugin-transform-typescript-metadata demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.