Les Décorateurs en TypeScript

Les décorateurs en TypeScript sont une fonctionnalité puissante qui permet d'ajouter des métadonnées ou de modifier le comportement des classes, des méthodes, des propriétés ou des paramètres. Ils sont souvent utilisés dans des frameworks comme Angular pour enrichir les composants et les services. Que vous soyez débutant ou développeur expérimenté, cet article vous guide pas à pas dans la création de vos propres décorateurs pour enrichir vos applications TypeScript.

Pré-requis

Avant de commencer, assurez-vous de disposer des éléments suivants :

• Une compréhension de base de TypeScript.
• TypeScript configuré avec l'option experimentalDecorators activée dans votre fichier tsconfig.json :

{
  "compilerOptions": {
    "experimentalDecorators": true
  }
}

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

Un décorateur est une fonction appliquée à une classe, une méthode, une propriété ou un paramètre. Précédé du symbole @, un décorateur peut modifier ou enrichir l'élément auquel il est attaché. Ses principales utilisations incluent :

• Ajouter des métadonnées : utile pour fournir des informations supplémentaires sur une classe ou une propriété.
• Modifier le comportement : permet de changer dynamiquement le fonctionnement d'une méthode ou d'une classe.
• Injecter des dépendances : pratique dans les architectures modulaires.

Création d'un Décorateur de Composant

Étape 1 : Définir le Décorateur

Nous allons créer un décorateur qui ajoute une propriété componentName à une classe.

function Component(name: string) {
    return function (constructor: Function) {
        constructor.prototype.componentName = name;
    };
}

Explication :

Ce décorateur reçoit une chaîne name et l'ajoute comme propriété sur le prototype de la classe. Toutes les instances de cette classe auront accès à cette propriété.

Étape 2 : Appliquer le Décorateur

Appliquons le décorateur à une classe.

@Component('MonComposant')
class MonComposant {
    constructor() {
        console.log(`Le nom du composant est : ${this.componentName}`);
    }
}

Étape 3 : Tester le Décorateur

Créons une instance de la classe pour vérifier son fonctionnement.

const composant = new MonComposant(); 
// Affiche : Le nom du composant est : MonComposant

Création d'un Décorateur d'Input

Étape 1 : Définir le Décorateur d'Input

Ce décorateur surveille et journalise les modifications d'une propriété.

function Input() {
    return function (target: any, propertyKey: string) {
        let value: any;

        const getter = () => {
            return value;
        };

        const setter = (newValue: any) => {
            console.log(`La valeur de ${propertyKey} a été mise à jour : ${newValue}`);
            value = newValue;
        };

        Object.defineProperty(target, propertyKey, {
            get: getter,
            set: setter,
            enumerable: true,
            configurable: true,
        });
    };
}

Explication :

Le décorateur utilise Object.defineProperty pour intercepter les modifications de la propriété. Cela permet d’ajouter une logique personnalisée, comme la journalisation des changements.

Étape 2 : Appliquer le Décorateur d'Input

Appliquons-le à une propriété.

class MonComposant {
    @Input()
    public nom: string;

    constructor(nom: string) {
        this.nom = nom;
    }
}

Étape 3 : Tester le Décorateur d'Input

Modifiez la propriété pour observer l'effet.

const composant = new MonComposant('Composant Initial');
composant.nom = 'Nouveau Composant'; 
// Affiche : La valeur de nom a été mise à jour : Nouveau Composant

Conclusion

Les décorateurs en TypeScript offrent une manière élégante et puissante d'ajouter des fonctionnalités et des métadonnées à vos classes et propriétés. En suivant cet article, vous avez appris à :

1. Créer un décorateur de composant pour enrichir une classe.
2. Implémenter un décorateur d'input pour surveiller les modifications des propriétés.

Ces exemples simples montrent comment les décorateurs peuvent améliorer la lisibilité et la maintenabilité de votre code. Explorez davantage la documentation officielle TypeScript pour découvrir des applications encore plus avancées, comme l'utilisation des métadonnées réfléchies avec Reflect.metadata.