Décorateurs TypeScript : Maîtrisez les Annotations et Modifications Runtime 🚀

Les décorateurs en TypeScript offrent une manière élégante d'ajouter des métadonnées et d'effectuer des modifications au moment de l'exécution. Dans cet article, nous allons explorer comment utiliser les décorateurs pour améliorer votre code, en mettant l'accent sur les décorateurs de propriété de méthode de classe.

🔍 Introduction aux Décorateurs en TypeScript

Les décorateurs sont une fonctionnalité avancée en TypeScript qui permet aux développeurs d'ajouter des annotations et d'intercepter des déclarations de classes, de méthodes, de propriétés ou de paramètres. Ils sont particulièrement utiles pour :

• Ajouter des métadonnées
• Modifier le comportement d'une méthode
• Effectuer des validations ou des transformations

Qu'est-ce qu'un Décorateur ?

Un décorateur est essentiellement une fonction qui est appliquée à une déclaration de classe ou à ses membres. Lorsqu'un décorateur est appliqué à un élément, il peut modifier son comportement ou ajouter des fonctionnalités supplémentaires.

// Exemple de décorateur simple function log(target: any, propertyKey: string, descriptor: PropertyDescriptor) {     const originalMethod = descriptor.value;      descriptor.value = function(...args: any[]) {         console.log(`Appel de ${propertyKey} avec les arguments :`, args);         return originalMethod.apply(this, args);     }; }  class Calculator {     @log     add(a: number, b: number) {         return a + b;     } }  const calculator = new Calculator(); calculator.add(2, 3); // Console : Appel de add avec les arguments : [2, 3] 

💡 Types de Décorateurs en TypeScript

TypeScript prend en charge plusieurs types de décorateurs :

• Décorateurs de classe : pour les classes entières
• Décorateurs de méthode : pour les méthodes de classe
• Décorateurs de propriété : pour les propriétés de classe
• Décorateurs de paramètre : pour les paramètres de méthode

Décorateurs de Propriété de Méthode de Classe

Les décorateurs de propriété de méthode sont utilisés pour intercepter et modifier le comportement des méthodes de classe. Ils sont souvent utilisés pour :

• Logger des appels de méthode
• Appliquer des restrictions d'accès
• Valider les entrées

function readonly(target: any, propertyKey: string, descriptor: PropertyDescriptor) {     descriptor.writable = false; }  class Person {     @readonly     sayHello() {         return "Hello!";     } }  const person = new Person(); person.sayHello = function() { return "Hi!"; }; // Erreur : ne peut pas réassigner une méthode readonly 

⚙️ Métadonnées et Modifications Runtime

Les décorateurs permettent également d'ajouter des métadonnées à vos classes et méthodes, ce qui peut être extrêmement utile pour la réflexion et la modification du comportement à l'exécution.

Ajout de Métadonnées avec Reflect Metadata

Pour utiliser les métadonnées avec vos décorateurs, TypeScript propose une bibliothèque appelée reflect-metadata. Voici comment l'utiliser :

import 'reflect-metadata';  function logType(target: any, key: string) {     const type = Reflect.getMetadata("design:type", target, key);     console.log(`${key} type: ${type.name}`); }  class Example {     @logType     property: string = 'test'; }  // Console : property type: String 

📚 FAQ sur les Décorateurs TypeScript

1. Les décorateurs sont-ils une fonctionnalité standard de JavaScript ?

Non, les décorateurs sont une fonctionnalité expérimentale en JavaScript, mais ils sont bien supportés par TypeScript.

2. Puis-je utiliser des décorateurs avec des fonctions non-classes ?

Non, les décorateurs sont conçus pour être utilisés avec les classes et leurs membres uniquement.

3. Quels sont les avantages des décorateurs ?

Ils permettent d'ajouter des fonctionnalités transversales de manière élégante et réutilisable, comme le logging ou la validation.

✅ Conclusion

Les décorateurs en TypeScript sont un outil puissant pour améliorer la modularité et la réutilisabilité de votre code. En comprenant comment utiliser les décorateurs de propriété de méthode de classe, vous pouvez ajouter des fonctionnalités avancées à vos applications. N'hésitez pas à expérimenter avec des décorateurs pour explorer leur potentiel.

Pour en savoir plus, consultez notre guide complet sur TypeScript et commencez à intégrer des décorateurs dans vos projets dès aujourd'hui !

Si vous avez des questions ou des expériences à partager, laissez un commentaire ci-dessous !