What is meaning by @ symbol in typescript --Angular 2

Question

I am using typescript for angular 2 application development.

But when we write code for component or route config or some other place we use "@" symbol.

My question is what this symbol means and why it is required?

Answer 1

The @ symbol you are referring to is called decorator.

Decorators provide a way to add both annotations and a meta-programming syntax for class declarations and members.

Basically when you are doing @component you are telling compiler that the class is a angular2 component with the metadata passed as an argument.

for eg.

@Component({
  moduleId: module.id,
  selector: 'heroes-app',
  templateUrl: 'heroes.component.html',
  styleUrls: ['heroes.component.css'],  
})
class HeroesComponent{}

this code will tell compiler that class HeroesComponent is supposed to be an angular2 component with metadata passed as arguments and it will create a component class.

Decorator isn’t a magic. It’s just function-calling.

for eg.

@Component({
selector: 'static-component',
template: `<p>Static Component</p>`
})
class StaticComponent {}

is equivalent to:

class DynamicComponent {
}

const dynamicComponent = Component({
    selector: 'dynamic-component',
    template: `<p>Dynamic Component</p>`
})(DynamicComponent);

Hope this helps.

Answer 2

This means you are applying a decorator.

With the introduction of Classes in TypeScript and ES6, there now exist certain scenarios that require additional features to support annotating or modifying classes and class members. Decorators provide a way to add both annotations and a meta-programming syntax for class declarations and members. Decorators are a stage 1 proposal for JavaScript and are available as an experimental feature of TypeScript.

• How to implement a typescript decorator?
• https://www.typescriptlang.org/docs/handbook/decorators.html