What is the @ symbol in TypeScript?

Question

Why in components or directives do the metadata or decorators have the @ symbol (e.g. @Component, @Directive)?

What is the purpose of it, and when should I use it?

Inmate

shortcut for annotation – Lahdidah

You might find reading this helpful. typescriptlang.org/docs/handbook/decorators.html – Cockshy

You should have run across this when you read the TypeScript documentation. Or, you could google for "typescript at-sign". – Archenemy

Possible duplicate of What does the @ (at sign) mean in the latest TypeScript (presumably v1.5) example? – Archenemy

Answer 1

It stands for decorators. It is not TypeScript specific.

Google "javascript decorator" to learn more about it.

For example:

http://javascript.info/tutorial/decorators

https://medium.com/google-developers/exploring-es7-decorators-76ecb65fb841#.jzu13e5lr

For up to date information about their standard implementation and when it will finally be released (future ECMAScript versions), see this page: https://github.com/tc39/proposal-decorators

And as @hardikModha mentioned, you can also look up the TypeScript handbook: http://www.typescriptlang.org/docs/handbook/decorators.html

Voyageur

Answer 2

Typical pattern, typically cryptic:

import {Component} from '@angular/core';
@Component({
  selector: 'app-root',
  template: `Hello`,
  standalone: true,
})
export class AppComponent {}

One way to break it down:

A) Make a decorator function

function myClassDecorator() {}

B) Declare a class

function myClassDecorator() {}
class AnyClass {}

C) Decorate (enhance) the class with the decorator

function myClassDecorator() {}
@myClassDecorator
class AnyClass {}

When the code runs the decorator has an opportunity to modify the class's behaviour. It's a kind of lightweight version of inheritance but decorators are more efficient and versitile. E.g. many can be applied to one class (multiple inheritance) or one can be applied to many classes, they can be applied not just to classes but other language elements such as methods.

Oddity 1:

@Component({...})

Can't say I've crunched through the source but the above looks like the invocation of a factory function. So Component is the factory function (perhaps typed as a decorator itself). The factory function returns a decorator function 'proper' which will do the heavy lifting to turn the bare bones '''AppComponent''' class into a fully functional Angular Component. The parameters passed to the factory tailor the Component according to the application.

Oddity 2:

@Component({...})
export class AppComponent {}

The above looks like two separate statements (invoke a decorator, declare and export a class) but's one unit of code doing three things written like this for brevity (declare a class with a decorator and export it). Slightly more verbose, arguably more readable, way to express it:

1 @Component({...})
2 class AppComponent {}
3
4 export { AppComponent }

The above declares an annotated class on lines 1 and 2 then exports it on line 4.

Either Angular enables the experimental decorator implementation in TypeScript or augments it with its own implementation, either way, vanilla TypeScript doesn't appear to play ball with decorators at the moment so some extra magic is happening when TypeScript runs in the context of Angular to make the decorator syntax runnable.

Tret