What is a TypeScript runner?

TypeScript is JavaScript with types. You describe the shape of your data with interfaces and type annotations, and the TypeScript compiler turns the code into plain JavaScript before it runs. Trying out a few lines usually means setting up a project, a compiler, and a config file. A TypeScript runner skips all of that. You write the code, run it, and read what it prints with console.log.

Tool description

This tool runs your TypeScript in your browser and shows everything the code writes to the console. Type or paste code on the left and press Run, or press Ctrl+Enter (Cmd+Enter on a Mac). The output appears on the right, one line for each console call, with warnings and errors marked in color. Nothing runs until you ask for it, so you can edit freely.

The code is compiled by the official TypeScript compiler and runs in a Web Worker, which is a background thread of your browser. Because of that, a script that never ends will not freeze the page: press Stop and it is gone. Your code is not sent to a server.

Examples

Describe data with an interface and work with it:

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

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

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

The output is:

Total: 13.5

Use an enum and a class with parameter properties:

enum Level {
  Low = "low",
  High = "high",
}

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

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

console.log(new Task("Write tests", Level.High).describe());
TypeScript

The output is:

Write tests (high)

Features

  • Runs TypeScript with the official compiler, so all TypeScript syntax is supported
  • Supports enums, namespaces, decorators, generics, and parameter properties
  • Shows syntax errors with their line and column, in the same format as tsc
  • Shows the output of console.log, info, debug, warn, and error, with colors for warnings and errors
  • Formats objects, arrays, maps, sets, classes, dates, and errors, and handles circular references
  • Supports console.group, count, time, assert, dir, and clear
  • Runs async code, including top-level await, timers, and promises
  • Reports uncaught errors and unhandled promise rejections in the output
  • Stop button that ends a script at once, even one stuck in an endless loop
  • Preserve logs option, on by default, keeps the output of earlier runs so you can compare results
  • Hover over a line in the output to see the date and time it was logged
  • Copy the whole output, clear it with the Clear button, or download your code as a file

How it works

When you press Run, the TypeScript compiler removes the types from your code and turns it into JavaScript. The compiler is loaded once when the page opens, so the first run may take a moment on a slow connection. If the code has a syntax error, the error is shown and the code does not run.

The JavaScript is then sent to a new Web Worker. Inside the worker, the console methods are replaced, so every call is turned into text and sent back to the page. Your code is wrapped in an async function, which is what allows await at the top level.

The status bar under the output shows Running while your code is compiling, executing, or waiting for a timer it started. A setInterval keeps the run going until you clear it or press Stop. Each run starts with a fresh worker, so variables from an earlier run are never left behind.

Tips

  • Types are not checked. Like tsx and esbuild, the tool removes them and runs the code, so const count: number = "three" runs without an error
  • Use console.log, not a final expression: the value of the last line is not printed, so 1 + 2 on its own shows nothing
  • You can keep export statements and type-only imports in your code. Importing a package does not work, and fails with a "Cannot find module" error
  • A worker has no page, so document, window, and other DOM objects are not available. Use self for the global scope
  • The output keeps the newest 1000 lines, and a single line is cut after 10000 characters
  • Run only code you trust, as you would in the browser console