Comment utiliser les décorateurs dans TypeScript

Les décorateurs dans TypeScript sont une fonctionnalité puissante qui permet aux développeurs d'ajouter des fonctionnalités supplémentaires aux classes, méthodes, propriétés et paramètres. Ils permettent de modifier le comportement du code existant sans modifier sa structure réelle. Ce guide explique comment utiliser les décorateurs dans TypeScript avec des exemples faciles à suivre.

Que sont les décorateurs ?

Les décorateurs sont des fonctions spéciales qui peuvent être appliquées aux classes, méthodes, propriétés ou paramètres. Ils sont appelés au moment de l'exécution et permettent aux développeurs d'annoter et de modifier le code de manière déclarative. Pour activer les décorateurs dans un projet TypeScript, l'indicateur experimentalDecorators doit être défini sur true dans le fichier tsconfig.json.

Activation des décorateurs dans TypeScript

Pour utiliser des décorateurs, le compilateur TypeScript doit être configuré pour les reconnaître. Cela peut être fait en définissant l'indicateur experimentalDecorators sur true dans le fichier tsconfig.json.

{
  "compilerOptions": {
    "target": "ES6",
    "experimentalDecorators": true
  }
}

Une fois les décorateurs activés, ils peuvent être utilisés dans tout le projet.

Créer un décorateur de classe

Un décorateur de classe est appliqué à une déclaration de classe et peut être utilisé pour modifier ou remplacer une définition de classe. Les décorateurs de classe sont déclarés juste au-dessus de la classe qu'ils décorent, à l'aide du symbole @.

function LogClass(target: Function) {
  console.log(`Class ${target.name} is created.`);
}

@LogClass
class Person {
  constructor(public name: string) {}
}

const person = new Person('Alice');

Dans cet exemple, le décorateur LogClass enregistre un message lorsque la classe Person est créée. Le décorateur est défini comme une fonction qui prend un seul argument: le constructeur de la classe en cours de décoration.

Décorateurs de méthode

Les décorateurs de méthode s'appliquent aux méthodes d'une classe. Ils permettent aux développeurs d'intercepter les appels de méthode, de modifier leur comportement ou d'effectuer des opérations supplémentaires avant ou après l'exécution de la méthode.

function LogMethod(target: Object, propertyKey: string, descriptor: PropertyDescriptor) {
  const originalMethod = descriptor.value;

  descriptor.value = function (...args: any[]) {
    console.log(`Method ${propertyKey} is called with arguments: ${args}`);
    return originalMethod.apply(this, args);
  };

  return descriptor;
}

class Calculator {
  @LogMethod
  add(a: number, b: number): number {
    return a + b;
  }
}

const calc = new Calculator();
calc.add(2, 3);

Ici, le décorateur LogMethod enregistre le nom de la méthode et ses arguments à chaque fois que la méthode add est appelée. Il encapsule la méthode d'origine dans une nouvelle fonction qui effectue la journalisation avant de déléguer à la méthode d'origine.

Décorateurs de propriétés

Les décorateurs de propriétés sont utilisés pour observer ou modifier le comportement des propriétés de classe. Contrairement aux décorateurs de méthodes, ils n'ont pas accès à la valeur de la propriété elle-même, mais ils peuvent ajouter des métadonnées aux propriétés.

function ReadOnly(target: Object, propertyKey: string) {
  Object.defineProperty(target, propertyKey, {
    writable: false
  });
}

class Book {
  @ReadOnly
  title: string = 'TypeScript Guide';
}

const myBook = new Book();
myBook.title = 'New Title'; // This will cause an error in strict mode

Dans cet exemple, le décorateur ReadOnly est appliqué à la propriété title de la classe Book, la rendant en lecture seule en définissant writable sur false.

Décorateurs de paramètres

Les décorateurs de paramètres sont utilisés pour annoter ou modifier les paramètres de méthode. Ils reçoivent trois arguments: l'objet cible, le nom de la méthode et l'index du paramètre.

function LogParameter(target: Object, propertyKey: string, parameterIndex: number) {
  console.log(`Parameter in position ${parameterIndex} at ${propertyKey} method is decorated.`);
}

class UserService {
  greet(@LogParameter message: string): void {
    console.log(message);
  }
}

const userService = new UserService();
userService.greet('Hello, TypeScript!');

Dans cet exemple, le décorateur LogParameter est appliqué au paramètre message de la méthode greet de la classe UserService. Le décorateur enregistre des informations sur le paramètre en cours de décoration.

Conclusion

Les décorateurs dans TypeScript offrent un moyen puissant d'améliorer les fonctionnalités du code sans modifier sa structure. En exploitant les décorateurs de classe, de méthode, de propriété et de paramètre, les développeurs peuvent facilement ajouter des fonctionnalités réutilisables dans leurs projets. Avec les exemples fournis dans ce guide, il est facile de commencer à utiliser les décorateurs dans TypeScript.