@babel/plugin-proposal-class-properties

What is @babel/plugin-proposal-class-properties?

The @babel/plugin-proposal-class-properties package is a Babel plugin that allows you to use the class properties syntax in JavaScript. This syntax is part of a proposal for ECMAScript and has not been finalized yet, but this plugin lets you use it with Babel to compile your code to a version of JavaScript that is compatible with current environments. It supports both static and instance properties, as well as public and private fields.

What are @babel/plugin-proposal-class-properties's main functionalities?

Static Class Properties

Allows you to define static properties on a class, which are properties that are accessed on the class itself, not on instances of the class.

class MyClass {\n  static myStaticProp = 42;\n}

Instance Class Properties

Enables you to define properties directly on class instances, with an initial value, without needing to set them inside the class constructor.

class MyClass {\n  myInstanceProp = 'default value';\n}

Public Class Fields

Supports the declaration of public fields in a class, which are accessible from outside of the class.

class MyClass {\n  publicField = 'some value';\n}

Private Class Fields

Allows the definition of private fields in a class, which are only accessible within the class itself using the '#' syntax.

class MyClass {\n  #privateField = 'hidden value';\n}

Other packages similar to @babel/plugin-proposal-class-properties

@babel/plugin-proposal-private-methods

This package is similar to @babel/plugin-proposal-class-properties but focuses on adding support for private methods and accessors in classes. It allows you to define methods that can only be called from within the class itself.

@babel/plugin-proposal-decorators

This package provides functionality for decorators, which are a stage 2 proposal for JavaScript. Decorators are a way to modify classes or properties at design time. While not directly related to class properties, decorators often work in conjunction with them to add annotations or modify class behavior.

@babel/plugin-transform-classes

This package transforms ES2015 classes to ES5, which is a broader transformation that includes but is not limited to class properties. It's more comprehensive in terms of class-related transformations but does not specifically target the class properties proposal.

README

@babel/plugin-proposal-class-properties

This plugin transforms static class properties as well as properties declared with the property initializer syntax

See our website @babel/plugin-proposal-class-properties for more information.

Install

Using npm:

npm install --save-dev @babel/plugin-proposal-class-properties

or using yarn:

yarn add @babel/plugin-proposal-class-properties --dev