Les décorateurs TypeScript expliqués : écrivez désormais un code plus propre et plus intelligent

TypeScript est un langage de programmation fortement typé qui s'appuie sur JavaScript, vous offrant de meilleurs outils à grande échelle. TypeScript a été développé pour aider à résoudre certains des problèmes qui surviennent lors de l'écriture de code à l'aide de JavaScript. TypeScript surmonte les pièges de JavaScript grâce à l'utilisation de types.

Chaque valeur dans un code source dactylographié a un type. TypeScript vérifie que chaque valeur respecte les règles associées à son type. TypeScript recherche les erreurs dans votre code source sans que vous ayez à exécuter ou exécuter votre programme.

C'est ce qu'on appelle la vérification de type statique, qui consiste à vérifier les erreurs de développement en fonction du type de valeurs utilisées dans un programme.

En plus de vous aider à écrire du code plus clair et plus lisible et de vous fournir une vérification de type statique, TypeScript offre des fonctionnalités supplémentaires pour faciliter la lisibilité, la réutilisation et la maintenabilité du code. L'une de ces fonctionnalités concerne les décorateurs TypeScript.

TypeScript Decorators

Les décorateurs dans TypeScript sont une fonctionnalité qui vous permet de modifier ou d'améliorer le comportement de votre code au moment de l'exécution ou d'ajouter des métadonnées à votre code. Les décorateurs permettent la métaprogrammation en TypeScript. La métaprogrammation est une technique de programmation dans laquelle des programmes peuvent traiter d'autres programmes comme leurs données et ainsi modifier leur comportement.

Essentiellement, les décorateurs sont des fonctions qui seront appelées pour exécuter une certaine logique au moment de l'exécution lorsque les éléments décorés seront consultés ou modifiés.

De cette façon, des fonctionnalités supplémentaires peuvent être ajoutées aux éléments décorés. Les décorateurs TypeScript peuvent être attachés aux déclarations de classe, aux méthodes, aux propriétés, aux accesseurs (getters et setters) et aux paramètres de méthode.

Dans TypeScript, les décorateurs sont préfixés par le symbole @ et prennent la forme de @expression avec expression évaluer une fonction qui sera appelée au moment de l'exécution. La syntaxe générale d'utilisation des décorateurs dans TypeScript est la suivante :

@decoratorName
itemToDecorate

Un exemple de décorateur de classe simple est présenté ci-dessous :

function logClass(target: Function) {
  console.log("The Log Class Decorator has been called")
  console.log("Class:", target);
}

@logClass // @logClass is a decorator
class MyClass {
  constructor() {
    console.log("An instance of MyClass has been created");
  }
}

const myInstance = new MyClass();

Le résultat de l'exécution du code ci-dessus est affiché ci-dessous :

Sortie :

The Log Class Decorator has been called
Class: [class MyClass]
An instance of MyClass has been created

La fonction logClass() prend en compte un seul argument appelé l'objectif De type Fonction. L'argument l'objectif est de type Fonction car il recevra le constructeur de la classe que nous décorons.

Utiliser logClass() en tant que décorateur pour décorer la classe appelée Myclass nous mettons @logclass juste avant la déclaration de MyClass. Le décorateur doit avoir le même nom que la fonction que vous souhaitez utiliser pour décorer un élément.

Lorsqu'une instance de MyClass est créée, le comportement du décorateur est exécuté en plus du constructeur de classe, comme indiqué par la sortie.

Les décorateurs sont actuellement disponibles sur Typescript à titre expérimental. Par conséquent, pour pouvoir utiliser des décorateurs dans TypeScript, vous devez activer l'option experimentalDecorators dans l'option du compilateur dans le fichier tsconfig.json. 

Pour cela, générez un fichier tsconfig.json dans votre dossier de projet TypeScript en exécutant la commande suivante dans le terminal ouvert dans votre répertoire de projet :

tsc --init

Une fois que vous avez un fichier tsconfig.json, ouvrez-le et décommentez experimentalDecorators comme indiqué ci-dessous :

De plus, définissez votre version cible JavaScript sur au moins ES2015.

Importance of TypeScript Decorators

Un bon code peut facilement être déterminé par sa lisibilité, sa réutilisation et sa maintenabilité. Le code lisible est un code facile à comprendre et à interpréter et qui communique clairement l'intention du développeur à celui qui lit le code.

Le code réutilisable, quant à lui, est un code qui permet à des composants spécifiques, tels que des fonctions et des classes, d'être réutilisés, adaptés et utilisés dans d'autres parties d'une application ou dans une application complètement nouvelle sans modification significative.

Le code maintenable est un code qui peut facilement être modifié, mis à jour et corrigé au cours de sa durée de vie.

Les décorateurs TypeScript vous permettent d'obtenir la lisibilité, la réutilisabilité et la maintenabilité du code. Premièrement, les décorateurs TypeScript vous permettent d'améliorer le comportement de votre code à l'aide d'une syntaxe déclarative plus facile à lire. Vous pouvez encapsuler la logique dans des décorateurs et les invoquer en décorant différents éléments de votre code là où vous avez besoin de la logique.

Cela rend votre code facile à lire et à comprendre ce qui se passe. Les décorateurs communiquent clairement l'intention du développeur.

Les décorateurs ne sont pas des éléments à usage unique ; ils sont réutilisables par nature. Vous pouvez créer un décorateur une seule fois et l'utiliser plusieurs fois dans plusieurs domaines.

Vous pouvez donc définir des décorateurs, les importer et les utiliser n'importe où dans votre base de code là où vous souhaitez modifier le comportement de votre code. Ceci est avantageux car cela vous permet d'éviter la duplication de la logique dans votre base de code, améliorant ainsi la réutilisabilité de votre code.

Les décorateurs vous offrent également une grande flexibilité et modularité dans votre code, vous permettant de séparer différentes fonctionnalités en composants indépendants. Ceci, couplé au fait qu'ils permettent l'écriture de code lisible et réutilisable, signifie que les décorateurs TypeScript vous permettront d'avoir un code facile à maintenir.

Types of TypeScript Decorators

Comme indiqué précédemment, les décorateurs TypeScript peuvent être attachés à des classes, des propriétés de classe, des méthodes de classe, des accesseurs de classe et des paramètres de méthode de classe. À partir des éléments que nous pouvons décorer, nous obtenons les différents types de décorateurs TypeScript. Ces décorateurs comprennent :

# 1. Décorateur de classe

Un décorateur de classe est un décorateur utilisé pour observer, modifier ou remplacer une définition de classe. Il est déclaré juste avant la classe qu'il décore. Un décorateur de classe est appliqué au constructeur de la classe qu’il décore. Au moment de l'exécution, un décorateur de classe sera appelé avec le constructeur de la classe qu'il décore comme seul argument.

Un décorateur de classe utilisé pour empêcher l’extension d’une classe est présenté ci-dessous :

function frozen(target: Function) {
  Object.freeze(target);
  Object.freeze(target.prototype)
}

@frozen
class Vehicle {
  wheels: number = 4;
  constructor() {
    console.log("A vehicle has been created")
  }
}

class Car extends Vehicle {
  constructor() {
    super();
    console.log("A car has been created");
  }
}

console.log(Object.isFrozen(Vehicle));

Pour éviter qu'une classe soit étendue, nous utilisons la fonction Objet.freeze() et réussir dans la classe que l'on souhaite geler. Un décorateur est utilisé pour ajouter cette fonctionnalité à une classe. Nous pouvons vérifier si la classe Vehicle est gelée au moment de l'exécution en passant la classe dans est gelé(), la sortie du code est affichée ci-dessous :

true

# 2. Décorateur immobilier

Un décorateur de propriété permet de décorer une propriété de classe, et il est déclaré juste avant la décoration de la propriété. Les décorateurs de propriétés peuvent être utilisés pour modifier ou observer une définition de propriété.

Au moment de l'exécution, le décorateur sera appelé et prendra deux arguments. Tout d’abord, soit la fonction constructeur de la classe si le membre est statique, soit le prototype de la classe s’il s’agit d’un membre d’instance. Le deuxième argument est le nom du membre, c'est-à-dire la propriété que vous décorez.

Dans TypeScript, les membres statiques sont précédés du mot-clé static. Les membres statiques sont accessibles sans instancier de classe. Les membres de l'instance n'ont pas le mot-clé static devant eux et ne sont accessibles qu'après la création d'une instance d'une classe.

Un exemple de décorateur immobilier est présenté ci-dessous :

function wheelsDecorator(target: any, propertyName: string) {
  console.log(propertyName.toUpperCase())
}

class Vehicle {
  @wheelsDecorator
  wheels: number = 4;
  constructor() {
    console.log("A vehicle has been created")
  }
}

Le résultat de l’exécution du code est présenté ci-dessous :

WHEELS

# 3. Méthode Décorateur

Un décorateur de méthode, déclaré juste avant une déclaration de méthode, est un décorateur utilisé pour observer, modifier ou remplacer une définition de méthode. Il prend trois arguments, la fonction constructeur de la classe si le membre est statique ou la propriété de la classe s'il s'agit d'un membre d'instance.

Le deuxième argument est le nom du membre et, enfin, un descripteur de propriété pour le membre. Un descripteur de propriété est un objet associé aux propriétés d'un objet et fournit des informations sur les attributs et le comportement d'une propriété.

Les décorateurs de méthodes sont utiles lorsque vous souhaitez effectuer une action avant ou après l’appel d’une méthode. Nous pouvons également les utiliser pour enregistrer des informations sur la méthode appelée. Cela peut être utile si vous souhaitez informer un utilisateur qu'une méthode est obsolète ; c'est-à-dire qu'il est toujours disponible, mais il n'est pas recommandé de l'utiliser car il pourrait être supprimé ultérieurement.

Un exemple de méthode décorateur est présenté ci-dessous :

const logDeprecated =(target: any, methodName: string, descriptor: PropertyDescriptor) => {
  console.log(`${methodName} has been deprecated`)
  console.log(descriptor);
}

class Vehicle {
  wheels: number = 4;
  constructor() {
    console.log("A vehicle has been created")
  }
  @logDeprecated
  reFuel(): void {
    console.log("Your vehicle is being refuelled");
  }
}

Sortie :

reFuel has been deprecated
{
  value: [Function: reFuel],
  writable: true,
  enumerable: false,
  configurable: true
}

# 4. Décorateurs accesseurs

Dans TypeScript, il existe deux types de méthodes d'accès, get et set. Les méthodes d'accesseur sont utilisées pour contrôler l'accès aux propriétés de classe. Les décorateurs d'accesseurs sont utilisés pour décorer ces deux méthodes d'accesseur, et ils sont déclarés juste avant une déclaration d'accesseur. Puisque les accesseurs sont toujours des méthodes, les décorateurs d’accesseurs fonctionnent exactement comme les décorateurs de méthodes.

Un exemple de décorateurs accesseurs est présenté ci-dessous :

const logWheels =(target: any, accessorName: string, descriptor: PropertyDescriptor) => {
  console.log(`${accessorName} used to get the number of wheels`)
  console.log(descriptor);
}

class Vehicle {
  private wheels: number = 4;
  constructor() {
    console.log("A vehicle has been created")
  }
  @logWheels
  get numWheels(): number {
    return this.wheels;
  }
}

Sortie :

numWheels used to get the number of wheels
{
  get: [Function: get numWheels],
  set: undefined,
  enumerable: false,
  configurable: true
}

Avec les décorateurs d’accesseurs, il est important de noter que les décorateurs ne peuvent pas être appliqués à plusieurs accesseurs get/set du même nom. Par exemple, dans notre exemple de code ci-dessus, si vous créez un setter appelé set numWheels, vous ne pouvez pas utiliser le décorateur logWheels dessus.

# 5. Décorateurs de paramètres

Un décorateur de paramètre est utilisé pour observer qu'un paramètre a été déclaré sur une méthode, et il est déclaré avant une déclaration de paramètre. Les décorateurs de paramètres prennent trois arguments, premièrement, la fonction constructeur de la classe pour un membre statique ou le prototype de la classe pour un membre d'instance.

Le deuxième argument est le nom du membre, c'est-à-dire le nom du paramètre. Le troisième argument est l'index ordinal du paramètre dans la liste des paramètres de la fonction. Autrement dit, dans la liste des paramètres, quelle est la position du paramètre, le premier paramètre étant à l'index 0 ?

Un exemple de décorateur de paramètres est présenté ci-dessous :

const passengerLog = (target: Object, propertyKey: string, parameterIndex: number) => {
  console.log(`Decorator on ${propertyKey}'s paremeter index ${parameterIndex}`);
}

class Vehicle {
  private wheels: number = 4;
  constructor() {
    console.log("A vehicle has been created")
  }
  pickPassenger( location: string, numPassengers: string, @passengerLog driver: string) {
    console.log(`${numPassengers} picked at ${location} by ${driver}`)
  }
  dropPassenger(driver: string, @passengerLog location: string, numPassengers: string) {
    console.log(`${numPassengers} dropped at ${location} by ${driver}`)
  }
}

Sortie :

Decorator on pickPassenger's paremeter index 2
Decorator on dropPassenger's paremeter index 1

Conclusion

Les décorateurs TypeScript contribuent grandement à améliorer la lisibilité de votre code et à vous aider à écrire du code modulaire et réutilisable, car vous pouvez déclarer les décorateurs une fois et les utiliser plusieurs fois. De plus, les décorateurs contribuent à la maintenabilité globale de votre code.

Même s'il s'agit encore d'une fonctionnalité expérimentale, les décorateurs sont très utiles et vous devriez certainement envisager de vous familiariser avec eux.

Vous pouvez également lire comment convertir une chaîne en nombre en TypeScript.