initializing a class

2019-11-12

 | 

~2 min read

 | 

247 words

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


Hi there and thanks for reading! My name's Stephen. I live in Chicago with my wife, Kate, and dog, Finn. Want more? See about and get in touch!