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