@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.
class Bork { //Property initializer syntax instanceProperty = "bork"; boundFunction = () => { return this.instanceProperty; }; //Static class properties static staticProperty = "babelIsCool"; static staticFunction = function() { return Bork.staticProperty; }; } let myBork = new Bork(); //Property initializers are not on the prototype. console.log(myBork.__proto__.boundFunction); // > undefined //Bound functions are bound to the class instance. console.log(myBork.boundFunction.call(undefined)); // > "bork" //Static function exists on the class. console.log(Bork.staticFunction()); // > "babelIsCool"
Installation
npm install --save-dev @babel/plugin-proposal-class-properties
Usage
With a configuration file (Recommended)
Without options:
{ "plugins": ["@babel/plugin-proposal-class-properties"] }
With options:
{ "plugins": [["@babel/plugin-proposal-class-properties", { "loose": true }]] }
Via CLI
babel --plugins @babel/plugin-proposal-class-properties script.js
Via Node API
require("@babel/core").transformSync("code", { plugins: ["@babel/plugin-proposal-class-properties"], });
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
// babel.config.json { "assumptions": { "setPublicClassFields": true } }
For an explanation of the consequences of using either, see Definition vs. Assignment (TL;DR in Part 5)
Example
class Bork { static a = "foo"; static b; x = "bar"; y; }
Without { "setPublicClassFields": true }
, the above code will compile to the following, using Object.defineProperty
:
var Bork = function Bork() { babelHelpers.classCallCheck(this, Bork); Object.defineProperty(this, "x", { configurable: true, enumerable: true, writable: true, value: "bar", }); Object.defineProperty(this, "y", { configurable: true, enumerable: true, writable: true, value: void 0, }); }; Object.defineProperty(Bork, "a", { configurable: true, enumerable: true, writable: true, value: "foo", }); Object.defineProperty(Bork, "b", { configurable: true, enumerable: true, writable: true, value: void 0, });
However, with { "setPublicClassFields": true }
, it will compile using assignment expressions:
var Bork = function Bork() { babelHelpers.classCallCheck(this, Bork); this.x = "bar"; this.y = void 0; }; Bork.a = "foo"; Bork.b = void 0;
You can read more about configuring plugin options here