ts-rs : le compilateur TypeScript en Rust à essayer en ligne

ts-rs est notre projet de compilateur TypeScript écrit en Rust ; son outil s’appelle tsc-rs. Il transforme du TypeScript et du JSX pour les étapes suivantes de l’application. Dans bext, il participe à la préparation des composants. Compilé en WebAssembly, il peut aussi fonctionner directement dans un navigateur.

Mais que transforme-t-il exactement ? Pourquoi développer cette brique en Rust ? Et comment savoir si le JavaScript obtenu est correct ? Pour répondre, le plus simple est de compiler un exemple vous-même. L’atelier intégré à cet article utilise le vrai tsc-rs, avec du code modifiable et sa sortie JavaScript.

Que fait un compilateur TypeScript ?

TypeScript enrichit JavaScript avec des informations qui servent pendant le développement. Une fonction peut annoncer qu’elle attend un nombre ; une interface peut décrire les champs d’un produit. Ces indications aident l’éditeur et les outils d’analyse à détecter certaines incohérences.

Prenons un panier. Une ligne possède un prix et une quantité. L’interface TypeScript décrit cette structure, mais le calcul du total reste une multiplication JavaScript. Dans le code destiné à l’exécution, l’interface et les annotations de types peuvent être retirées ; l’opération doit conserver son comportement.

La documentation TypeScript sur l’effacement des types explique ce principe : les informations de type ne constituent pas une validation automatique pendant l’exécution. Une donnée provenant d’un formulaire ou d’une API doit toujours être contrôlée lorsque l’application en a besoin.

Démo : compilez du TypeScript en JavaScript avec ts-rs

Le premier exemple décrit une ligne de panier. Cliquez sur Compiler le TypeScript et comparez les deux panneaux. L’interface LignePanier et les annotations : number disparaissent de la sortie, tandis que la multiplication reste présente.

Essayez ensuite ces trois manipulations :

1. Changez le prix ou la quantité. Recompilez et retrouvez les nouvelles valeurs dans le JavaScript. La démonstration montre le code produit ; elle n’exécute pas le calcul.
2. Sélectionnez « Transformer un enum ». Observez le code ajouté pour représenter les valeurs de l’énumération à l’exécution.
3. Sélectionnez « Observer une erreur de syntaxe ». Il manque une expression après le signe égal. Le compilateur affiche un diagnostic ; ajoutez un nombre, puis relancez la compilation.

Le raccourci Ctrl + Entrée, ou ⌘ + Entrée sur Mac, lance aussi la compilation depuis le champ de code. Le bouton de réinitialisation permet de retrouver l’exemple de départ.

Effacer les types ne suffit pas pour toutes les constructions

Une annotation de type peut être retirée sans ajouter de code. D’autres constructions demandent une transformation. C’est notamment ce que montre l’exemple de l’énumération : les noms de ses valeurs doivent encore exister sous une forme utilisable par le programme.

La sortie dépend aussi des options : version de JavaScript ciblée, système de modules, mode JSX et autres réglages. Deux compilateurs peuvent produire des textes différents tout en préservant le même comportement ; à l’inverse, deux sorties presque identiques peuvent se distinguer sur un détail important.

Les options TypeScript relatives aux syntaxes effaçables illustrent cette frontière entre retrait d’informations de types et transformation de constructions qui influencent l’exécution.

Pourquoi développer tsc-rs en Rust et le porter en WebAssembly ?

Nous voulons utiliser le compilateur comme une brique intégrable. Il doit pouvoir participer à une chaîne de préparation de pages et être mobilisé par des outils de développement. Rust permet de construire cette brique sous forme de code natif, puis de cibler WebAssembly pour une utilisation dans le navigateur.

WebAssembly n’est pas ici le résultat de la compilation de votre exemple TypeScript. C’est le compilateur Rust lui-même qui a été compilé en WebAssembly. Une fois chargé, ce programme lit votre TypeScript et produit du JavaScript. Cette nuance permet de comprendre pourquoi le même travail de transformation peut être proposé dans une page web.

1. Avant votre visite : Rust → WebAssemblyLe compilateur tsc-rs est construit pour être exécutable par le navigateur.
2. Au premier clic : chargement du compilateurL’atelier récupère ce module. Les exemples restent lisibles avant son chargement.
3. À chaque essai : TypeScript → JavaScriptVotre code est fourni au compilateur localement. Le résultat revient dans le panneau de sortie.

Ce fonctionnement convient à des éditeurs en ligne, des outils de formation et des aperçus de composants. Il permet de rapprocher l’écriture du code et le retour visible par l’utilisateur. La présentation du moteur bext montre cette utilisation du compilateur dans son écosystème.

Rust est aussi un choix de maîtrise de l’implémentation. Il ne dispense pas de mesurer les résultats. Pour annoncer qu’un compilateur est plus rapide qu’un autre, il faut préciser les sources, les options, le travail réellement effectué et les conditions de mesure. Cet atelier sert à observer les transformations ; ce n’est pas un benchmark comparatif.

Transpilation, vérification des types et validation des données

Le mot « compilation » rassemble parfois plusieurs opérations. Pour évaluer un outil, il faut les distinguer. La transpilation transforme le code. La vérification des types analyse la cohérence des usages. La validation à l’exécution contrôle les données quand le programme fonctionne.

// Syntaxe valide, mais affectation incompatible avec le type annoncé.
const prix: number = "vingt-neuf";

Dans l’atelier, cette ligne peut produire du JavaScript : le mode exposé ici ne recherche pas cette incompatibilité de types. Cela ne signifie pas que la valeur est correcte pour une multiplication. Le contrôle des types et les tests de l’application gardent leur rôle dans la chaîne de développement.

Le projet tsc-rs est une implémentation distincte du compilateur officiel. Sa compatibilité doit donc être évaluée selon les fonctions et les options utilisées. Les sorties JavaScript, les diagnostics et les fichiers de déclarations se vérifient séparément. Un taux global sans description du périmètre masquerait ces différences.

Comment tsc-rs s’intègre dans bext et PRISM

Dans bext, tsc-rs prépare le TypeScript et le JSX utilisés par la chaîne de rendu. PRISM s’occupe des pages et de leur rendu côté serveur ; bext exécute et diffuse l’application. Le compilateur est une étape de cette architecture, avec une responsabilité précise : transformer correctement le code qu’on lui confie.

L’atelier de notre article consacré à bext et PRISM poursuit l’expérience : vous y modifiez un composant TSX, puis consultez son aperçu et le JavaScript généré. Le playground officiel bext propose un environnement plus complet pour explorer des pages et des modèles.

Pour une équipe qui construit une application, l’intérêt se situe dans cette continuité : des composants familiers en TypeScript, une transformation maîtrisée et des outils capables de donner un retour concret sur le code. La qualité du compilateur se vérifie ensuite dans des exemples reproductibles et dans les applications qui l’utilisent.

Questions fréquentes sur ts-rs et tsc-rs

Quelle différence entre ts-rs et tsc-rs ?

Dans cet article, ts-rs désigne notre projet de compilateur TypeScript en Rust. tsc-rs est le nom de l’outil qui en est issu et qui apparaît dans l’atelier et la chaîne de compilation de bext.

Est-ce que ts-rs transforme TypeScript en Rust ?

Non. Le compilateur est écrit en Rust, mais les exemples TypeScript sont transformés en JavaScript. Dans la démo, WebAssembly permet d’exécuter le compilateur Rust dans le navigateur.

Le compilateur intégré vérifie-t-il les types ?

L’atelier présente la transpilation et les diagnostics de syntaxe du module WebAssembly utilisé. Il ne réalise pas une vérification complète des types. Une annotation incompatible peut donc être retirée sans diagnostic.

Mon code est-il envoyé à un serveur ?

Non. Le navigateur télécharge le compilateur au premier clic, puis lui transmet votre code localement. L’atelier ne possède pas de fonction de sauvegarde ou de partage du code saisi.

Peut-on remplacer directement le compilateur officiel TypeScript ?

Une adoption doit être validée sur le projet concerné : syntaxe utilisée, options, modules, diagnostics et déclarations. tsc-rs ne doit pas être considéré comme un remplacement universel sans vérification.