Decorator does not add property to the class it is decorating. How do i fix it?

I am trying to understand how decorators work in javascript. I went through many articles regarding it but none of them actually explains the concept well.

I have tried the basic example of decorator from an article i have read. Here is the codepen link. I have defined a decorator function called superhero. I am decorating my class "MySuperHero" with it. As per my knowledge, The decorator should add the property power to the class. but when i do console.log it shows undefined.

function superhero(target) {
  target.isSuperhero = true
  target.power = 'flight'
}

@superhero
class MySuperHero {

}

console.log(MySuperHero.power) // It should show "flight" but its showing undefined in console 

Upvotes: 1

Views: 37

Answers (2)

Vikash_Singh
Vikash_Singh

Reputation: 1896

Javascript natively doesn't support @ decorators, you have to use babel please follow the installation steps mentioned in link: https://babeljs.io/docs/en/babel-plugin-proposal-decorators

Upvotes: 0

Smolin Pavel
Smolin Pavel

Reputation: 510

You should use babel --optional es7.decorators (babel CLI) to enable decorators. As it is still a proposal more info could be found here.

Hope this helps!

Upvotes: 1

Related Questions