2

I'm trying to allow '@' functions in my application, what should I add or insert to allow JS to interpret it, just like "angular2 @Component".

2 Answers2

3

The @ is used as a decorator in a new proposed feature for JavaScript. To use it you need to use a preprocessor like Babel. It is also available in typescript and widely used in Angular2. Example:

function myDecorator(value) {
   return function(target) {
      target.myProperty = value;
   }
}

@myDecorator('myValue')
class MyClass { }

Decorators will not work by default on Babel, you can find information on enabling them here.

Edit: Whether you consider @myDecorator('myValue') as @ being part of the function name or not, I think we can all acknowledge that it would look this way to those new to the language.

Related Links:

https://medium.com/google-developers/exploring-es7-decorators-76ecb65fb841 https://cabbageapps.com/fell-love-js-decorators/

Philip Kirkbride
  • 21,381
  • 38
  • 125
  • 225
  • 1
    ES6 did *not* introduce decorators. They are still just a [proposal](https://github.com/tc39/proposal-decorators), but they are part of [TypeScript](https://www.typescriptlang.org/docs/handbook/decorators.html) – str Aug 29 '17 at 15:52
  • _Please_ do not spread misinformation. Decorators are a proposal, they are not part of any specific version of the ECMAScript spec. Saying they are "ES6" is 100% a lie. – loganfsmyth Aug 29 '17 at 17:23
  • A lie is purposeful and malicious which this is not. From what I've read one can use decorators with babel and a later version of ES. If you have a more accurate answer please post it. @loganfsmyth – Philip Kirkbride Aug 29 '17 at 17:37
  • 1
    Fair, didn't mean to imply that it was purposeful, sorry. It's just frustrating because it's a common misconception and gets spread around here often. "ES6 (ES2015)" is a specific version of the spec that came out 2 years ago. If decorators were in there, you'd be able to use them in most JS environments by now without Babel. The fact that you need Babel to use a feature usually means it's a proposal and not in any ES* version, or only very recently got added to the official spec. – loganfsmyth Aug 29 '17 at 20:13
  • @loganfsmyth for ES2017 do you know if it is a standard feature or still a proposal? – Philip Kirkbride Aug 29 '17 at 20:18
  • 1
    The place to look is https://github.com/tc39/proposals. Decorators are a "stage 2" proposal following the process described in https://tc39.github.io/process-document/. Reaching stage 4 means they will be included in the next year-based spec version. ES2017 was released in June, at the earliest it would be ES2018 but even that is pretty optimistic. – loganfsmyth Aug 29 '17 at 20:30
1

According to a variable name validator for JavaScript, @ is a:

invalid identifier according to ECMAScript 6 / Unicode 8.0.0

And so it is invalid for function names as well. See also: What characters are valid for JavaScript variable names? In Angular you actually use TypeScript and they make use of @ as a decorator of a function, but it's not used in a function name.

Michael Troger
  • 3,336
  • 2
  • 25
  • 41