¿Qué es un ejecutor de TypeScript?

TypeScript es JavaScript con tipos. Describes la estructura de tus datos mediante interfaces y anotaciones de tipos, y el compilador de TypeScript convierte el código en JavaScript estándar antes de ejecutarlo. Probar unas pocas líneas normalmente implica configurar un proyecto, un compilador y un archivo de configuración. Un ejecutor de TypeScript evita todo eso. Escribes el código, lo ejecutas y lees lo que imprime con console.log.

Descripción de la herramienta

Esta herramienta ejecuta tu TypeScript en el navegador y muestra todo lo que el código escribe en la consola. Escribe o pega el código a la izquierda y pulsa Ejecutar, o pulsa Ctrl+Enter (Cmd+Enter en Mac). La salida aparece a la derecha, una línea por cada llamada a console, con las advertencias y los errores marcados con colores. Nada se ejecuta hasta que lo solicitas, así que puedes editar libremente.

El código se compila mediante el compilador oficial de TypeScript y se ejecuta en un Web Worker, que es un subproceso en segundo plano del navegador. Por eso, un script que nunca termina no congelará la página: pulsa Detener y desaparecerá. Tu código no se envía a ningún servidor.

Ejemplos

Describe datos con una interfaz y trabaja con ellos:

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

const cart: Product[] = [
  { name: "Libro", price: 12 },
  { name: "Bolígrafo", price: 1.5 },
];

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

La salida es:

Total: 13.5

Usa un enum y una clase con propiedades de parámetros:

enum Level {
  Low = "bajo",
  High = "alto",
}

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

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

console.log(new Task("Escribir pruebas", Level.High).describe());
TypeScript

La salida es:

Escribir pruebas (alto)

Funciones

  • Ejecuta TypeScript con el compilador oficial, por lo que admite toda la sintaxis de TypeScript
  • Admite enums, namespaces, decoradores, genéricos y propiedades de parámetros
  • Muestra los errores de sintaxis con su línea y columna, en el mismo formato que tsc
  • Muestra la salida de console.log, info, debug, warn y error, con colores para las advertencias y los errores
  • Da formato a objetos, arrays, mapas, conjuntos, clases, fechas y errores, y gestiona las referencias circulares
  • Admite console.group, count, time, assert, dir y clear
  • Ejecuta código asíncrono, incluido await de nivel superior, temporizadores y promises
  • Informa de los errores no capturados y de los rechazos de promises no gestionados en la salida
  • El botón Detener finaliza un script de inmediato, incluso si está atascado en un bucle infinito
  • La opción Conservar registros, activada de forma predeterminada, mantiene la salida de ejecuciones anteriores para que puedas comparar los resultados
  • Pasa el cursor sobre una línea de la salida para ver la fecha y la hora en que se registró
  • Copia toda la salida, bórrala con el botón Borrar o descarga tu código como archivo

Cómo funciona

Cuando pulsas Ejecutar, el compilador de TypeScript elimina los tipos de tu código y lo convierte en JavaScript. El compilador se carga una vez cuando se abre la página, por lo que la primera ejecución puede tardar un momento con una conexión lenta. Si el código contiene un error de sintaxis, se muestra el error y el código no se ejecuta.

A continuación, el JavaScript se envía a un nuevo Web Worker. Dentro del worker, los métodos de console se reemplazan, de modo que cada llamada se convierte en texto y se envía de vuelta a la página. Tu código se incluye en una función asíncrona, lo que permite usar await en el nivel superior.

La barra de estado situada debajo de la salida muestra Ejecutando mientras tu código se compila, se ejecuta o espera a un temporizador que ha iniciado. Un setInterval mantiene la ejecución activa hasta que lo eliminas o pulsas Detener. Cada ejecución comienza con un worker nuevo, por lo que las variables de una ejecución anterior nunca permanecen.

Consejos

  • Los tipos no se comprueban. Al igual que tsx y esbuild, la herramienta los elimina y ejecuta el código, por lo que const count: number = "three" se ejecuta sin errores
  • Usa console.log, no una expresión final: el valor de la última línea no se imprime, por lo que 1 + 2 por sí solo no muestra nada
  • Puedes conservar las instrucciones export y las importaciones que solo contienen tipos en tu código. Importar un paquete no funciona y produce un error "No se encuentra el módulo"
  • Un worker no tiene página, por lo que document, window y otros objetos del DOM no están disponibles. Usa self para el ámbito global
  • La salida conserva las 1000 líneas más recientes y una línea individual se trunca después de 10000 caracteres
  • Ejecuta únicamente código de confianza, como harías en la consola del navegador