What is @babel/plugin-proposal-decorators?
The @babel/plugin-proposal-decorators package is a Babel plugin that enables the use of decorators, which are a stage 2 proposal for JavaScript. Decorators provide a way to add annotations and a meta-programming syntax for class declarations and members. Decorators can be used to modify classes, properties, methods, and accessors.
What are @babel/plugin-proposal-decorators's main functionalities?
Class Decorators
Class decorators are applied to the class and can be used to observe, modify, or replace a class definition. They can be used for logging, auto-binding, injecting dependencies, etc.
@decorator
class MyClass {}
function decorator(Class) {
// Modify or wrap the class
return modifiedClass;
}
Method Decorators
Method decorators are applied to methods of a class and can be used to observe, modify, or replace method definitions. This can be useful for debouncing, throttling, memoization, etc.
class MyClass {
@decorator
myMethod() {}
}
function decorator(target, name, descriptor) {
// Modify or wrap the method
return modifiedDescriptor;
}
Property Decorators
Property decorators are applied to class properties and can be used to modify the behavior of a property, such as by adding getters and setters, or by initializing with a default value.
class MyClass {
@decorator
myProperty;
}
function decorator(target, name) {
// Modify or define property behavior
}
Accessor Decorators
Accessor decorators are applied to getters and setters and can be used to observe, modify, or replace accessors. This can be useful for validation, logging, etc.
class MyClass {
_myValue;
@decorator
get myValue() {
return this._myValue;
}
set myValue(value) {
this._myValue = value;
}
}
function decorator(target, name, descriptor) {
// Modify or wrap the accessor
return modifiedDescriptor;
}
Other packages similar to @babel/plugin-proposal-decorators
core-decorators
core-decorators is a library of decorators inspired by languages that include them from the start. It offers decorators like @readonly, @debounce, and @autobind, among others. Unlike @babel/plugin-proposal-decorators, which is a Babel plugin to transpile decorator syntax, core-decorators provides ready-to-use decorators for existing JavaScript code.
typescript
TypeScript is a superset of JavaScript that adds static types and has built-in support for decorators. TypeScript decorators are similar in concept to those in @babel/plugin-proposal-decorators, but they are built into the language and can be used without a separate Babel plugin. TypeScript decorators can be used for class, method, property, and accessor decoration, similar to @babel/plugin-proposal-decorators.
mobx
mobx is a state management library that makes use of decorators for observable properties, computed values, and reactions. The decorators provided by mobx, such as @observable and @computed, are specific to the library's reactivity system and are used to enhance the reactive programming experience. While @babel/plugin-proposal-decorators enables the decorator syntax, mobx provides specific decorators for its own ecosystem.
@babel/plugin-proposal-decorators
Compile class and object decorators to ES5
See our website @babel/plugin-proposal-decorators for more information.
Install
Using npm:
npm install --save-dev @babel/plugin-proposal-decorators
or using yarn:
yarn add @babel/plugin-proposal-decorators --dev