@babel/plugin-proposal-class-properties

NOTE: This plugin is included in @babel/preset-env, in ES2022

Example

Below is a class with four class properties which will be transformed.

  1. class Bork {
  2.   //Property initializer syntax
  3.   instanceProperty = "bork";
  4.   boundFunction = () => {
  5.     return this.instanceProperty;
  6.   };
  8.   //Static class properties
  9.   static staticProperty = "babelIsCool";
  10.   static staticFunction = function() {
  11.     return Bork.staticProperty;
  12.   };
  13. }
  15. let myBork = new Bork();
  17. //Property initializers are not on the prototype.
  18. console.log(myBork.__proto__.boundFunction); // > undefined
  20. //Bound functions are bound to the class instance.
  21. console.log(myBork.boundFunction.call(undefined)); // > "bork"
  23. //Static function exists on the class.
  24. console.log(Bork.staticFunction()); // > "babelIsCool"

Installation

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

Usage

With a configuration file (Recommended)

Without options:

  1. {
  2.   "plugins": ["@babel/plugin-proposal-class-properties"]
  3. }

With options:

  1. {
  2.   "plugins": [["@babel/plugin-proposal-class-properties", { "loose": true }]]
  3. }

Via CLI

  1. babel --plugins @babel/plugin-proposal-class-properties script.js

Via Node API

  1. require("@babel/core").transformSync("code", {
  2.   plugins: ["@babel/plugin-proposal-class-properties"],
  3. });

Options

loose

boolean, defaults to false.

When true, class properties are compiled to use an assignment expression instead of Object.defineProperty.

⚠️ Consider migrating to the top level setPublicClassFields assumption

  1. // babel.config.json
  2. {
  3.   "assumptions": {
  4.     "setPublicClassFields": true
  5.   }
  6. }

For an explanation of the consequences of using either, see Definition vs. Assignment (TL;DR in Part 5)

Example

  1. class Bork {
  2.   static a = "foo";
  3.   static b;
  5.   x = "bar";
  6.   y;
  7. }

Without { "setPublicClassFields": true }, the above code will compile to the following, using Object.defineProperty:

  1. var Bork = function Bork() {
  2.   babelHelpers.classCallCheck(this, Bork);
  3.   Object.defineProperty(this, "x", {
  4.     configurable: true,
  5.     enumerable: true,
  6.     writable: true,
  7.     value: "bar",
  8.   });
  9.   Object.defineProperty(this, "y", {
  10.     configurable: true,
  11.     enumerable: true,
  12.     writable: true,
  13.     value: void 0,
  14.   });
  15. };
  17. Object.defineProperty(Bork, "a", {
  18.   configurable: true,
  19.   enumerable: true,
  20.   writable: true,
  21.   value: "foo",
  22. });
  23. Object.defineProperty(Bork, "b", {
  24.   configurable: true,
  25.   enumerable: true,
  26.   writable: true,
  27.   value: void 0,
  28. });

However, with { "setPublicClassFields": true }, it will compile using assignment expressions:

  1. var Bork = function Bork() {
  2.   babelHelpers.classCallCheck(this, Bork);
  3.   this.x = "bar";
  4.   this.y = void 0;
  5. };
  7. Bork.a = "foo";
  8. Bork.b = void 0;

You can read more about configuring plugin options here

References