Forcer l'utilisation de syntaxe compatible JS en TypeScript 5.8 ⚡

Microsoft vient d’annoncer la sortie de TypeScript 5.8 ! Parmi les nouveautés, l’option de compilation “erasableSyntaxOnly” fait son apparition.

Comme vous le savez, TypeScript est un “superset” de JavaScript, ce qui signifie qu’il est compatible avec JavaScript et ajoute des fonctionnalités et des syntaxes supplémentaires. La plupart de ces éléments sont simplement retirés lors de la compilation, c’est par exemple le cas des modificateurs public, private et protected, ou encore des types (const pi: number = 3.14 est transpilé en const pi = 3.14). Malheureusement, certaines de ces syntaxes n’existent pas en JavaScript et le compilateur ne peut pas simplement retirer des éléments du code, mais il doit “convertir” ce code en une version compatible avec JavaScript.

Par exemple, les enum disponibles en TypeScript n’existent pas en JavaScript. Il faut donc transformer tout l’enum en code plus verbeux, mais pas nécessairement plus sûr :

enum Animal { Chat, Chien }

Code correspondant, transpilé en JavaScript :

var Animal;
(function (Animal) {
    Animal[Animal["Chat"] = 0] = "Chat";
    Animal[Animal["Chien"] = 1] = "Chien";
})(Animal || (Animal = {}));

Mais, pourquoi se soucier du fait que TypeScript transpile le code non compatible en code compatible, c’est son travail !?

Oui. Mais Node a récemment ajouté la possibilité d’exécuter directement un fichier TypeScript sans le transpiler, cependant ce n’est possible que s’il contient du code qui peut être retiré. Utiliser un enum ou du code dans un namespace, par exemple, est impossible. De plus, certaines de ces fonctionnalités ne sont pas aussi sécurisées. Il est par exemple possible d’accéder à une propriété déclarée avec le modificateur private en TypeScript, alors que l’opérateur de portée # de JavaScript rend cela impossible. De plus, selon le projet il peut y avoir un mélange de TypeScript et de JavaScript qui doivent être éxécutés ensemble.

L’option --erasableSyntaxOnly

En activant cette option, TypeScript retournera une erreur si la syntaxe que vous utilisez est spécifique à TypeScript sans possibilité d’être simplement effacée. Par exemple :

// ❌ error: This syntax is not allowed when 'erasableSyntaxOnly' is enabled.
namespace geometry {
    export function distance() {};
}
 
// ❌ error: An `import =` alias
import dist = container.distance;
 
class Point {
    // ❌ error: Parameter properties
    constructor(public x: number, public y: number) { }
}
 
// ❌ error: An enum declaration.
enum Direction {
    Up,
    Down,
    Left,
    Right,
}

Sources et liens

Nous avons vu les principales nouveautés, mais la version 5.8 de TypeScript vient avec d’autres changements qui pourraient vous intéresser. N’hésitez pas à consulter les liens suivants pour plus d’informations :

• Article de Microsoft
• Playground TypeScript