initializing a class

Continuing the trend of learning more about Javascript classes of late, I found the following recently and thought it was quite interesting.

Historically, when we created a class, we would instantiate it like so:

class Details extends Base {
    constructor(props){
        super(props)
        this.foo = ‘bar’;
    }
}

A recent proposal to TC39 regarding static class features, however, suggests that in the future we’ll be able to do something as simply as:

class Details extends React.Component {
  foo = ‘bar’;
}

No need for the constructor at all!

This is also true even if the class does not extend a subclass.

For example:

class Details {
    constructor(){
        this.foo = ‘bar’;
    }
}

Becomes:

class Details extends Base {
  foo = "bar"
}

You can start using this syntax today if you transpile with Babel.

To do so, you will need to add the following to your babelrc or babel config object:

{
  "presets": ["preset-react", "preset-env"],
  "plugins": ["plugin-propsal-class-properties"]
}

Note: all of these are scoped to @babel - so the package to install would be @babel/preset-react for example. To install these you can do the following:

npm i @babel/preset-react @babel/preset-env @babel/plugin-proposal-class-properties

And, if you are using eslint, you will need to tell it which parser to use - so add the following to your .eslintrc:

{
  /* ... */
  "parser": "babel-eslint"
}

Additional Reading

• Class Fields Proposal | TC39
• @babel/plugin-proposal-class-properties | Babel