Les décorateurs TypeScript - L’exemple de @Component

Définition et syntaxe d’un décorateur

Un décorateur permet d’ajouter un comportement spécial ou des métadonnées à un élément du code.

En TypeScript et dans Angular plus spécifiquement, les décorateurs doivent respecter certains points de syntaxe :

• Un décorateur commence toujours par le symbole @, suivi du nom du décorateur et d’une paire de parenthèses : @Component(), @Injectable(), @Input()… Les parenthèses sont obligatoires, même si on ne passe pas de paramètre(s) au décorateur.
• Un décorateur doit être positionné juste au-dessus ou à gauche de l’élément qu’il décore. L’élément décoré peut être une classe, une propriété ou méthode de classe, ou un paramètre de méthode.
• Certains décorateurs reçoivent un objet de configuration en paramètre, d’autres pas. Ne pas oublier les parenthèses après le nom du décorateur, même si le décorateur ne prend pas de paramètres.

Notez enfin que même si la syntaxe générale des décorateurs est fournie par le langage TypeScript, les décorateurs spécifiques qu’on utilise sont fournis par Angular. Il faut donc toujours les importer avant de pouvoir les utiliser :

import { Component } from '@angular/core';

Exemples du décorateur @Component

Le décorateur @Component permet de transformer une simple classe TypeScript en composant Angular, et de définir les paramètres du composant comme son sélecteur et son template.

import { Component } from '@angular/core';

@Component({
  selector: 'app-meteo',
  templateUrl: './meteo.component.html'
})
export class AppComponent { }

On voit que tous les points de syntaxe ont bien été respectés :

• Le symbole Component a été importé de “@angular/core”.
• Le décorateur @Component porte sur la classe AppComponent, car il est situé juste au-dessus d’elle dans le code. Il ne faut donc surtout pas mettre de code entre le décorateur et la classe, sinon l’association serait cassée.
• Le décorateur @Component prend en paramètre un objet dont les propriétés sont imposées par Angular. Dans l’exemple, cet objet a les propriétés selector et templateUrl, mais la documentation de @Component montre que de nombreuses autres propriétés sont supportées.