TypeScript
16 - Les Decorators

Les decorateurs

Les decorators sont une fonctionnalité avancée de TypeScript qui permet de modifier ou d'étendre le comportement des classes, des méthodes, des propriétés ou des paramètres de fonction. Ils sont largement utilisés dans les frameworks modernes comme Angular.

Definition

Un decorator est une fonction ordinaire qui prend trois arguments :

  • Soit une cible (classe, méthode, propriété ou paramètre)
  • Soit un nom de propriété si le decorator est appliqué à une propriété ou un paramètre
  • Un descripteur de propriété si le decorator est appliqué à une propriété ou un paramètre
function log(target: Function) {
  console.log("Classe décorée :", target);
}
 
@log
class Exemple {
  // Code de la classe...
}

Dans cet exemple, le decorator log est appliqué à la classe Exemple. Lorsque la classe est définie, le decorator est exécuté et affiche le nom de la classe dans la console.

Exemple d'utilisation

function wizardOnly(target: any, propertyKey: string, descriptor: PropertyDescriptor ) {
  console.log({target}, {propertyKey}, {descriptor});
  const originalMethod = descriptor.value;  // Sauvegarde de la méthode originale
 
  descriptor.value = function(this: User, ...args: any[]) {
 
    console.log({this: this});
    // Vérification de l'état 'isAdmin' de l'instance utilisée
    if (this.isWizard ) {
      console.log("Accès refusé: Vous devez être un wizard pour utiliser cette fonction.");
      return;
    }
    // Exécution de la méthode originale si la vérification est passée
    return originalMethod.apply(this, args);
  };
}
  • wizardOnly est un decorator qui prend la forme d'une fonction.
  • Il y a trois arguments : target, propertyKey et descriptor.
  • target est la classe ou le prototype de la classe si le decorator est appliqué à une méthode.
  • propertyKey est le nom de la propriété ou de la méthode. Ici c'est la chaine de caractère getSecret.
  • descriptor est un objet qui contient des informations sur la propriété ou la méthode. descriptor.value est la méthode elle-même, c'est à dire getSecret.
  • nous spécifions que la méthode getSecret doit être appelée sur une instance de User avec this: User.
  • args est un tableau contenant les arguments passés à la méthode getSecret.
  • Nous vérifions si l'utilisateur est un wizard en vérifiant la propriété isWizard de l'instance de User.
class User {
  isWizard: boolean;
 
  constructor(isWizard = false) {
    this.isWizard = isWizard;
  }
 
  // Application du décorateur à la méthode 'getDada'
  @wizardOnly
  getSecret() {
    console.log("Secret magique : Voldemort est Tom Jedusor");
  }
}
// Test du contrôle d'accès avec deux types d'utilisateurs
const muggle = new User();
const wizard = new User(true);
 
muggle.getSecret(); // Affiche: "Accès refusé: Vous devez être un wizard pour utiliser cette fonction."
wizard.getSecret(); // Affiche: "Secret magique : Voldemort est Tom Jedusor"
export {}