What is the difference between annotation and decorator?

Traceur gives us annotations. TypeScript gives us decorators. But Angular 2 supports both.

Annotations create an "annotations" array. whereas Decorators are functions that receive the decorated object and can make any changes to it they like.

As angular use TypeScript instead of atScript so it is using decorators. There are basically four kind of decorators are there which are

• Class decorators, e.g. @Component and @NgModule
• Property decorators for properties inside classes, e.g. @Input and @Output
• Method decorators for methods inside classes, e.g. @HostListener
• Parameter decorators for parameters inside class constructors, e.g. @Inject

For more in depth you can refer

• https://toddmotto.com/angular-decorators
• http://nicholasjohnson.com/blog/annotations-vs-decorators/

A decorator corresponds to a function that is called on the class whereas annotations are "only" metadata set on the class using the Reflect Metadata library.

With TypeScript and ES7, @Something is a decorator. In the context of Angular2, decorators like @Component, @Injectable, ... define metadata for the decorated element using the Reflect.defineMetadata method.

This question could interest you to find out what a decorator actually is:

• How are decorators (annotations) compiled in Typescript?