Décorateurs TypeScript (+ décorateurs Angular fréquents)

Décorateurs TypeScript (+ décorateurs Angular fréquents)

Qu’est-ce qu’un décorateur ?

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

Par exemple, le décorateur @Injectable transforme une simple classe TypeScript en service Angular :

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

@Injectable()
export class DataService { }

En matière de syntaxe :

  • Un décorateur commence toujours par le symbole @, suivi du nom du décorateur et d’une paire de parenthèses.
  • 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.

Décorateurs fréquemment utilisés dans Angular

Le framework Angular fournit de nombreux décorateurs. Ils servent à transformer un simple symbole du langage TypeScript, comme une classe, en une entité spéciale reconnue par le framework.

Passons en revue quelques décorateurs fréquemment utilisés dans Angular.

Le décorateur @Component

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

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

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

Le décorateur @Injectable

Le décorateur @Injectable permet de transformer une simple classe TypeScript en service Angular, et de définir la portée de ce service dans l’application avec le paramètre providedIn. Nous expliquerons le concept de service plus tard.

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

@Injectable({
  providedIn: 'root'
})
export class AuthService { }

Le décorateur @Input

Enfin, le décorateur @Input permet de signaler qu’une propriété d’un composant recevra sa valeur du composant parent :

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

@Component({ ... })
export class MeteoComponent {
  @Input() city: string;
}

Utilité des décorateurs

Dans les exemples ci-dessus, les décorateurs permettent d’activer les mécaniques d’Angular.

  • Les décorateurs permettent d’associer un comportement spécial à un élément du code. Par exemple, le décorateur @Component signale à Angular qu’il traiter une classe comme une classe de composant, et qu’il est donc responsable d’instancier cette classe quand le sélecteur du composant est utilisé dans un template.

  • Les décorateurs permettent éventuellement de passer des métadonnées requises par Angular pour faire son travail. Par exemple, le décorateur @Component prend un objet en paramètre, qui définit le sélecteur et le template du composant. Sans ces informations, le composant ne fonctionnerait pas.


 

Cette recette vous a plus ? Rejoignez-nous à Paris pour une formation Angular de 3 jours dans laquelle vous coderez une application professionnelle que vous déploierez en production.

Le jour où j'ai enfin compris Angular