Qu’est-ce qu’un exécuteur TypeScript ?

TypeScript est JavaScript avec des types. Vous décrivez la structure de vos données à l’aide d’interfaces et d’annotations de type, puis le compilateur TypeScript transforme le code en JavaScript standard avant son exécution. Pour essayer quelques lignes, il faut généralement configurer un projet, un compilateur et un fichier de configuration. Un exécuteur TypeScript vous évite tout cela. Vous écrivez le code, vous l’exécutez et vous lisez ce qu’il affiche avec console.log.

Description de l’outil

Cet outil exécute votre TypeScript dans votre navigateur et affiche tout ce que le code écrit dans la console. Saisissez ou collez le code à gauche et appuyez sur Exécuter, ou appuyez sur Ctrl+Entrée (Cmd+Entrée sur Mac). La sortie apparaît à droite, une ligne pour chaque appel à console, avec les avertissements et les erreurs signalés en couleur. Rien n’est exécuté tant que vous ne le demandez pas, vous pouvez donc modifier le code librement.

Le code est compilé par le compilateur TypeScript officiel et s’exécute dans un Web Worker, c’est-à-dire un thread d’arrière-plan de votre navigateur. Ainsi, un script qui ne se termine jamais ne bloquera pas la page : appuyez sur Arrêter et il sera interrompu. Votre code n’est pas envoyé à un serveur.

Exemples

Décrivez des données avec une interface et manipulez-les :

interface Product {
  name: string;
  price: number;
}

const cart: Product[] = [
  { name: "Livre", price: 12 },
  { name: "Stylo", price: 1.5 },
];

const total = cart.reduce((sum, item) => sum + item.price, 0);
console.log(`Total : ${total}`);
TypeScript

La sortie est :

Total : 13.5

Utilisez une énumération et une classe avec des propriétés paramétrées :

enum Level {
  Low = "faible",
  High = "élevé",
}

class Task {
  constructor(
    public title: string,
    private level: Level,
  ) {}

  describe() {
    return `${this.title} (${this.level})`;
  }
}

console.log(new Task("Écrire des tests", Level.High).describe());
TypeScript

La sortie est :

Écrire des tests (élevé)

Fonctionnalités

  • Exécute TypeScript avec le compilateur officiel, toutes les syntaxes TypeScript sont donc prises en charge
  • Prend en charge les énumérations, les espaces de noms, les décorateurs, les génériques et les propriétés paramétrées
  • Affiche les erreurs de syntaxe avec leur ligne et leur colonne, dans le même format que tsc
  • Affiche la sortie de console.log, info, debug, warn et error, avec des couleurs pour les avertissements et les erreurs
  • Formate les objets, les tableaux, les maps, les ensembles, les classes, les dates et les erreurs, et gère les références circulaires
  • Prend en charge console.group, count, time, assert, dir et clear
  • Exécute le code asynchrone, notamment await au niveau supérieur, les minuteurs et les promises
  • Signale les erreurs non interceptées et les rejets de promises non gérés dans la sortie
  • Bouton Arrêter qui interrompt immédiatement un script, même s’il est bloqué dans une boucle infinie
  • L’option Conserver les journaux, activée par défaut, conserve la sortie des exécutions précédentes afin de pouvoir comparer les résultats
  • Survolez une ligne de la sortie pour voir la date et l’heure auxquelles elle a été enregistrée
  • Copiez toute la sortie, effacez-la avec le bouton Effacer ou téléchargez votre code sous forme de fichier

Fonctionnement

Lorsque vous appuyez sur Exécuter, le compilateur TypeScript supprime les types de votre code et le transforme en JavaScript. Le compilateur est chargé une seule fois à l’ouverture de la page ; la première exécution peut donc prendre un moment avec une connexion lente. Si le code contient une erreur de syntaxe, l’erreur est affichée et le code n’est pas exécuté.

Le JavaScript est ensuite envoyé à un nouveau Web Worker. Dans le Worker, les méthodes de console sont remplacées : chaque appel est transformé en texte et renvoyé à la page. Votre code est encapsulé dans une fonction asynchrone, ce qui permet d’utiliser await au niveau supérieur.

La barre d’état sous la sortie affiche Exécution en cours pendant la compilation ou l’exécution de votre code, ou lorsqu’il attend un minuteur qu’il a démarré. Un setInterval maintient l’exécution jusqu’à ce que vous le supprimiez ou que vous appuyiez sur Arrêter. Chaque exécution démarre avec un Worker vierge ; les variables d’une exécution précédente ne sont donc jamais conservées.

Conseils

  • Les types ne sont pas vérifiés. Comme tsx et esbuild, l’outil les supprime et exécute le code ; ainsi, const count: number = "trois" s’exécute sans erreur
  • Utilisez console.log plutôt qu’une expression finale : la valeur de la dernière ligne n’est pas affichée, donc 1 + 2 seul n’affiche rien
  • Vous pouvez conserver les instructions d’exportation et les imports contenant uniquement des types dans votre code. L’importation d’un package ne fonctionne pas et échoue avec l’erreur « Module introuvable »
  • Un Worker n’a pas de page ; document, window et les autres objets du DOM ne sont donc pas disponibles. Utilisez self pour accéder à la portée globale
  • La sortie conserve les 1 000 lignes les plus récentes et une ligne est tronquée après 10 000 caractères
  • N’exécutez que du code auquel vous faites confiance, comme vous le feriez dans la console du navigateur