TypeScript 5.0 bêta prend en charge les décorateurs d'ECMAScript

Par:
fredericmazue

mar, 31/01/2023 - 15:26

Microsoft a annoncé la disponibilité de TypeScript 5.0 bêta. Une mouture qui selon Microsoft apporte de nombreuses améliorations pour rendre le langage plus simple et qui réduisent son empreinte mémoire tout en améliorant ses performances. La nouveauté la plus notable de TypeScript 5.0 bêta est la prise en charge des décorateurs d'ECMAScript.

Les décorateurs sont des fonctions appelées sur des classes, des éléments de classe ou d'autres formes de syntaxe JavaScript. Les décorateurs ont trois capacités principales :

  1. Ils peuvent remplacer la valeur qui est décorée par une valeur correspondante qui a la même sémantique. 
  2. Ils peuvent donner accès à la valeur qui est décorée via des fonctions d'accès qu'ils peuvent ensuite choisir de partager.
  3. Ils peuvent initialiser la valeur qui est décorée, en exécutant du code supplémentaire après que la valeur a été entièrement définie. Dans les cas où la valeur est un membre de la classe, l'initialisation se produit une fois par instance.

Essentiellement, les décorateurs peuvent être utilisés pour métaprogrammer et ajouter des fonctionnalités à une valeur, sans modifier fondamentalement son comportement externe.

Microsoft donne cet exemple :

class Person {
    name: string;

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

    greet() {
        console.log(`Hello, my name is ${this.name}.`);
    }
}

const p = new Person("Ray");
p.greet();

Supposons qu'à des fins de débogage, on modifie la classe comme ceci :

class Person {
    name: string;
    constructor(name: string) {
        this.name = name;
    }

    greet() {
        console.log("LOG: Entering method.");
        console.log(`Hello, my name is ${this.name}.`);
        console.log("LOG: Exiting method.")
    }
}

C'est quelque chose qu'un développeur fait fréquemment, et qu'il fait et refait avec d'autres méthodes au cours de son travail. Un décorateur va simplifier les choses. On commence par écrire une fonction de remplacement de caractère générique qui sera amenée à remplacer les méthodes dont on veut suivre l'exécution :

function loggedMethod(originalMethod: any, _context: any) {

    function replacementMethod(this: any, ...args: any[]) {
        console.log("LOG: Entering method.")
        const result = originalMethod.call(this, ...args);
        console.log("LOG: Exiting method.")
        return result;
    }

    return replacementMethod;
}

Maintenant loggedMethod peut par exemple décorer la méthode greet de notre classe :

class Person {
    name: string;
    constructor(name: string) {
        this.name = name;
    }

    @loggedMethod
    greet() {
        console.log(`Hello, my name is ${this.name}.`);
    }
}

const p = new Person("Ray");
p.greet();

// Output:
//   LOG: Entering method.
//   Hello, my name is Ray.
//   LOG: Exiting method.

Ainsi la décoration @loggedMethod a remplacé la méthode greet par la fonction loggedMethod

Toutes les nouveautés de TypeScript 5.0 bêta sont décrites dans l'annonce de Microsoft.