Comprendre les décorateurs TypeScript

Les décorateurs TypeScript offrent un moyen puissant d'ajouter des fonctionnalités aux classes, méthodes, propriétés et paramètres lors de l'exécution. Ils sont souvent utilisés dans des frameworks comme Angular pour l'injection de dépendances, la journalisation, la validation, etc. Cet article explique les différents types de décorateurs dans TypeScript et comment les utiliser efficacement.

Que sont les décorateurs TypeScript ?

Les décorateurs dans TypeScript sont des fonctions préfixées par un symbole @ et qui peuvent être attachées à divers éléments tels que des classes, des méthodes ou des propriétés. Ils vous permettent de modifier le comportement du code auquel ils sont attachés, sans modifier directement le code.

Types de décorateurs

• Décorateurs de classe: Appliqués à une classe entière.
• Décorateurs de méthode: Appliqué à une méthode dans une classe.
• Décorateurs de propriété: appliqués à une propriété dans une classe.
• Décorateurs de paramètres: Appliqué aux paramètres d'une méthode dans une classe.

Comment activer les décorateurs dans TypeScript

Avant de pouvoir utiliser les décorateurs, assurez-vous de les activer dans votre fichier tsconfig.json en définissant "experimentalDecorators" sur true.

{
  "compilerOptions": {
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true
  }
}

Décorateurs de classe

Un décorateur de classe s'applique à une classe entière. Il est utile pour ajouter des métadonnées ou modifier le comportement d'une classe.

function Controller(route: string) {
  return function (target: Function) {
    target.prototype.route = route;
  };
}

@Controller('/api/user')
class UserController {
  // Class logic
}

console.log(new UserController().route); // Outputs: '/api/user'

Décorateurs de méthode

Les décorateurs de méthode sont appliqués aux méthodes d'une classe. Ces décorateurs peuvent être utilisés pour modifier ou enregistrer le comportement d'une méthode.

function Log(target: any, propertyName: string, descriptor: PropertyDescriptor) {
  const originalMethod = descriptor.value;
  
  descriptor.value = function (...args: any[]) {
    console.log(`Calling ${propertyName} with 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); // Logs: 'Calling add with arguments: 2,3'

Décorateurs de propriétés

Les décorateurs de propriétés sont utilisés pour ajouter des fonctionnalités aux propriétés d'une classe. Ils peuvent être utiles pour la validation ou pour ajouter des métadonnées à une propriété.

function ReadOnly(target: any, key: string) {
  const descriptor: PropertyDescriptor = {
    writable: false
  };
  return descriptor;
}

class Person {
  @ReadOnly
  name: string = 'John Doe';
}

const person = new Person();
person.name = 'Jane Doe'; // Error: Cannot assign to read only property 'name'

Décorateurs de paramètres

Les décorateurs de paramètres sont utilisés pour modifier ou enregistrer des informations sur les paramètres de méthode.

function LogParameter(target: any, propertyName: string, index: number) {
  const metadataKey = `log_${propertyName}_parameters`;
  
  if (Array.isArray(target[metadataKey])) {
    target[metadataKey].push(index);
  } else {
    target[metadataKey] = [index];
  }
}

class Demo {
  method(@LogParameter param1: string, @LogParameter param2: number) {
    // Method logic
  }
}

Conclusion

Les décorateurs de TypeScript offrent un moyen puissant d'améliorer les fonctionnalités de votre code sans modifier sa structure. En comprenant comment utiliser les décorateurs de classe, de méthode, de propriété et de paramètre, vous pouvez implémenter des fonctionnalités avancées telles que la journalisation, la validation et l'injection de dépendances. Les décorateurs sont une fonctionnalité clé de TypeScript qui peut grandement améliorer votre flux de travail de développement, en particulier dans les applications de grande taille.