If you’ve been following the ESNext scene, you might have stumbled upon syntax that includes the
@ character. Weird, right? Following along that code can be diffcult for other reasons too, as it doesn’t really behave as you might be accustomed to. That new syntax is
decorators, which are part of the ES7 spec. Read on for a simple explanation of what they are and how to use them.
One note: This article aims to illustrate these concepts in a very simple way. I will not cover all use cases and variations, and I will try not to use super-technical language. If you’re an expert on the subject, this post is not for you. I’d love to hear your feedback if you read it though!
Basic knowledge about object-oriented programming is good to have before continuing.
What are decorators, you may ask? They are a way to mix in additional parts into your classes. We already got classes with ES6, and while you can extend them, the class system in Ecmascript is quite simplistic. There will be times when you want many classes to share a piece of functionality, but there isn’t a good way to distribute that functionality. ES7 decorators are here to help.
If you’ve heard about
traits, that’s basically what we’re going to do here. Decorators simply “decorate” an object with new stuff or metadata. As always, everything is best explained with a code example:
Decorators can also be inserted inside the class body:
Stupid example aside, this is a good use-case for decorators; adding metadata. In this case we’re telling the getter that it’s not allowed to be enumerated, that is, it won’t show up in a loop. While it won’t be great for hiding evidence of an NSA backdoor, a decorator such as this is good to have when you don’t want irrelevant stuff in your loops.
We can also add methods:
As you can see, mixing something into a class is really easy in ES7. If you’ve used classic React (with
React.createClass() and that stuff), and you miss the mixin feature in the ES6 version, this might just be the ticket. There’s discussions about making decorators a part of React in the future!
That’s about all that fits into the “ELI5” scope, but there’s more to decorators than what I’ve highlighted here. Next, you can read Wycats’ summary, and install a collection of ready-made decorators you can use right now!
Thanks for reading!
That’s it for this time! I’ll post more about ES6 and 7 in the future, as I get acquainted with the new features myself. I always appreciate feedback and new ideas about blogging topics, you can reach me at @ddunderfelt on twitter. Thanks for reading!