Introduction aux décorateurs

Les décorateurs dans TypeScript sont des fonctions spéciales qui vous permettent d’ajouter des métadonnées ou de modifier le comportement des classes, des méthodes et des propriétés.

Ils sont souvent utilisés dans des infrastructures comme Angular pour simplifier le développement.

Fonctionnement des décorateurs

Un décorateur est une fonction appliquée à une classe ou à ses membres (méthodes, propriétés, etc.).

Par exemple, @Component dans Angular est un décorateur qui ajoute des métadonnées à une classe afin de la définir comme un composant.

Utilisation des décorateurs intégrés

TypeScript propose des décorateurs intégrés tels que :

• @readonly : rend une propriété accessible en lecture seule.
• @enumerable : contrôle si une propriété est énumérable.

Ces décorateurs permettent de modifier directement le comportement des propriétés ou des méthodes.

Créer un décorateur simple

Vous pouvez créer votre propre décorateur pour journaliser des messages avec log ou ajouter des fonctionnalités :

Appliquez-le à une propriété : @Log.

function Log(target: any, propertyName: string) {
  console.log(`Property ${propertyName} was accessed`);
}

Décorateurs de classes

Les décorateurs de classes servent à modifier ou à enrichir le comportement d’une classe entière :

function SimpleDecorator(constructor: Function) {
  console.log(`${constructor.name} is decorated`);
}

Appliquez-le à une classe : @SimpleDecorator.

function SimpleDecorator(constructor: Function) {
  console.log(`${constructor.name} is decorated`);
}

Décorateurs de méthodes

Les décorateurs de méthodes modifient le comportement d’une méthode de classe :

Utilisez-le sur une méthode : @LogMethod.

function LogMethod(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  console.log(`Method ${propertyKey} was called`);
}

Utiliser des décorateurs dans Angular

Angular s’appuie largement sur les décorateurs pour ajouter des métadonnées à ses composants :

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

Le décorateur @Component définit la classe comme un composant Angular.

Bonnes pratiques d’utilisation des décorateurs

Lorsque vous utilisez des décorateurs :

• Gardez-les simples et ciblés.
• Utilisez-les pour les métadonnées, et non pour une logique complexe.
• Tirez parti des décorateurs intégrés lorsque cela est possible afin de gagner du temps.

Félicitations !

Vous avez appris comment fonctionnent les décorateurs dans TypeScript et comment les utiliser pour modifier ou enrichir votre code. Continuez à expérimenter avec les décorateurs afin de maîtriser leur utilisation dans vos projets !