What does the "@" char mean in ecmascript 6?

Question

Given the script below, that can be found in the angular 2 official tutorial, what does the "@" character mean? Is it an ecmascript 6 feature?

Can anyone elaborate about it?

import {Component} from 'angular2/core';
export class Hero {
  id: number;
  name: string;
}
@Component({
  selector: 'my-app',
  template:`
    <h1>{{title}}</h1>
    <h2>{{hero.name}} details!</h2>
    <div><label>id: </label>{{hero.id}}</div>
    <div>
      <label>name: </label>
      <input [(ngModel)]="hero.name" placeholder="name">
    </div>
    `
})
export class AppComponent {
  public title = 'Tour of Heroes';
  public hero: Hero = {
    id: 1,
    name: 'Windstorm'
  };
}

@ is used to indicate decorator and anotation before there mentioning name — Pankaj Parkar, Mar 26 '16 at 16:27
See also http://blog.thoughtram.io/angular/2015/05/03/the-difference-between-annotations-and-decorators.html and http://stackoverflow.com/questions/29775830/how-to-implement-a-typescript-decorator — Günter Zöchbauer, Mar 26 '16 at 16:28

score 1 · Accepted Answer · answered Mar 26 '16 at 16:30

It's just TypeScript decorators, check them out here

A Class Decorator is declared just before a class declaration. The class decorator is applied to the constructor of the class and can be used to observe, modify, or replace a class definition. A class decorator cannot be used in a declaration file, or in any other ambient context (such as on a declare class).

The expression for the class decorator will be called as a function at runtime, with the constructor of the decorated class as its only argument.

If the class decorator returns a value, it will replace the class declaration with the provided constructor function.

NOTE Should you chose to return a new constructor function, you must take care to maintain the original prototype. The logic that applies decorators at runtime will not do this for you. The following is an example of a class decorator (@sealed) applied to the Greeter class:

@sealed
class Greeter {
    greeting: string;
    constructor(message: string) {
        this.greeting = message;
    }
    greet() {
        return "Hello, " + this.greeting;
    }
}

What does the "@" char mean in ecmascript 6?

1 Answers1