typescript - versiones - install angular

¿Qué significa el símbolo @ en mecanografiado-Angular 2?

Question

Estoy utilizando mecanografiado para el desarrollo de aplicaciones angular 2.

Pero cuando escribimos código para la configuración de componentes o rutas o en algún otro lugar, usamos el símbolo "@".

Mi pregunta es ¿qué significa este símbolo y por qué se requiere?

Answer 1

Esto significa que estás aplicando un decorador.

Con la introducción de Clases en TypeScript y ES6, ahora existen ciertos escenarios que requieren características adicionales para admitir anotaciones o modificaciones de clases y miembros de clases. Los decoradores proporcionan una forma de agregar anotaciones y una sintaxis de metacomprogramación para las declaraciones de clase y los miembros. Los decoradores son una propuesta de primera etapa para JavaScript y están disponibles como una función experimental de TypeScript.

• ¿Cómo implementar un decorador mecanografiado?
• https://www.typescriptlang.org/docs/handbook/decorators.html

Answer 2

El símbolo @ te refieres se llama decorator .

Los decoradores proporcionan una forma de agregar anotaciones y una sintaxis de metacomprogramación para las declaraciones de clase y los miembros.

Básicamente, cuando estás haciendo @component le estás diciendo al compilador que la clase es un componente angular2 con los metadatos pasados ​​como argumento.

por ej.

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

este código le dirá al compilador que se supone que la clase HeroesComponent es un componente angular2 con metadatos pasados ​​como argumentos y creará una clase de componente.

El decorador no es una magia. Es solo una función que llama.

por ej.

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

es equivalente a:

class DynamicComponent {
}

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

Espero que esto ayude.