Comment travailler avec les décorateurs TypeScript dans Angular

Les décorateurs TypeScript sont un type spécial de déclaration qui peut être attaché à une classe, une méthode, un accesseur, une propriété ou un paramètre. Dans Angular, les décorateurs permettent d'ajouter des métadonnées aux classes, ce qui les rend très efficaces pour créer des composants, des services et bien plus encore réutilisables. Ce guide explique comment utiliser les décorateurs TypeScript dans Angular, en fournissant des exemples pour aider à mieux comprendre leur utilisation.

Que sont les décorateurs TypeScript ?

Les décorateurs sont des fonctions qui modifient le comportement d'une classe ou d'un membre de classe. Dans Angular, les décorateurs sont utilisés pour définir des composants, des directives, des pipes et des services injectables. Ils fournissent un moyen déclaratif d'appliquer des métadonnées à une classe, qu'Angular utilise à diverses fins, telles que la création d'instances de composants ou l'injection de dépendances.

Décorateurs angulaires courants

Angular dispose de plusieurs décorateurs intégrés utilisés à des fins différentes. Vous trouverez ci-dessous les décorateurs Angular les plus courants:

• @Component - Définit un composant angulaire.
• @Directive - Définit une directive angulaire.
• @Pipe - Définit un tuyau angulaire.
• @Injectable - Définit un service qui peut être injecté dans d'autres composants ou services.
• @Input - Décore une propriété pour en faire une entrée de liaison de données.
• @Output - Décore une propriété pour en faire une sortie de liaison d'événement.

Utilisation de @Component Decorator

Le décorateur @Component est utilisé pour définir un composant Angular. Il fournit des métadonnées sur le composant, telles que son sélecteur, son modèle, ses styles et d'autres configurations.

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

@Component({
  selector: 'app-hello-world',
  template: `<h1>Hello, World!</h1>`,
  styles: ['h1 { color: blue; }']
})
export class HelloWorldComponent { }

Dans cet exemple, le décorateur @Component définit un composant simple avec un modèle affichant « Hello, World ! ». Le sélecteur selector spécifie la balise HTML personnalisée à utiliser pour ce composant.

Utilisation de @Injectable Decorator

Le décorateur @Injectable est utilisé pour définir une classe de service qui peut être injectée dans d'autres composants ou services. Il s'agit d'un élément essentiel du système d'injection de dépendances d'Angular.

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

@Injectable({
  providedIn: 'root'
})
export class DataService {
  getData() {
    return ['Angular', 'TypeScript', 'Decorators'];
  }
}

Ici, le décorateur @Injectable rend le DataService disponible pour l'injection de dépendances dans toute l'application.

Utilisation des décorateurs @Input et @Output

Les décorateurs @Input et @Output sont utilisés pour créer des propriétés d'entrée et des événements de sortie dans les composants Angular. Ils sont couramment utilisés pour la communication entre composants.

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

@Component({
  selector: 'app-child',
  template: `
    <p>{{ message }}</p>
    <button (click)="sendMessage()">Send Message</button>
  `
})
export class ChildComponent {
  @Input() message: string;
  @Output() messageEvent = new EventEmitter();

  sendMessage() {
    this.messageEvent.emit('Hello from Child Component!');
  }
}

Dans cet exemple, le décorateur @Input est utilisé pour transmettre des données d'un composant parent à un composant enfant. Le décorateur @Output est utilisé pour renvoyer des données du composant enfant au composant parent via un événement.

Création de décorateurs personnalisés

Des décorateurs personnalisés peuvent être créés dans Angular pour ajouter un comportement ou des métadonnées spécifiques aux classes, méthodes ou propriétés. Vous trouverez ci-dessous un exemple de décorateur de classe simple:

function LogClass(constructor: Function) {
  console.log('Class Decorator called:', constructor);
}

@LogClass
class MyService {
  constructor() {
    console.log('MyService created');
  }
}

Ici, la fonction LogClass est un décorateur personnalisé qui enregistre la classe dans la console lorsqu'elle est définie. L'application de @LogClass à MyService enregistre les messages lors de sa création.

Conclusion

Les décorateurs d'Angular offrent un moyen puissant d'ajouter des métadonnées et un comportement aux classes, méthodes, propriétés et paramètres. Comprendre comment utiliser les décorateurs intégrés tels que @Component, @Injectable, @Input et @Output est essentiel pour un développement Angular efficace. De plus, des décorateurs personnalisés peuvent être créés pour répondre aux besoins spécifiques d'une application, ajoutant ainsi de la flexibilité au processus de développement.