Skip to main content
DevStackKit
All tools

TypeScript Playground

Check TypeScript for errors, see the JavaScript it becomes and run it, all in your browser, with several files and a zip download.

import { average, type Score } from './utils';

interface Student {
name: string;
scores: Score[];
}

const students: Student[] = [
{ name: 'Ana', scores: [8, 9, 10] },
{ name: 'Ben', scores: [6, 7, 9] },
];

for (const student of students) {
console.log(student.name, 'average:', average(student.scores).toFixed(1));
}

// Try changing 'Ana' to a number: the Problems list explains the mistake.

Result
Problems

Press Run to check your code. Problems appear here.

JavaScript of main.ts

Console

console.log messages and errors appear here.

Shortcuts: Ctrl+Enter run · / search (use ⌘ on Mac)

Free Online TypeScript Playground

Check TypeScript and run it. Write code on the left and press Run: the compiler lists what is wrong, shows the plain JavaScript your code becomes, and runs it with a console. You can use several files that import each other, and everything happens in your browser, so your code is never uploaded. Check TypeScript for errors, see the JavaScript it becomes and run it, with several files that import each other.

How to use the playground

  1. Write TypeScript in main.ts. The sample imports a small helper from utils.ts.
  2. Press Run (or Ctrl+Enter). The first time, the compiler loads for a moment.
  3. Read the Problems list. Each line gives the file, line and column; click it to jump to the spot.
  4. Look at JavaScript to see your code without the types, and at the Console for what it printed.

Files, target and strict

Press + to add files and import them with import { name } from './file'. Run starts the file you have open. Target picks the JavaScript version of the result and Strict turns on the careful checks. The ⋯ menu downloads all files in one zip. For plain JavaScript without types, use the JavaScript Playground, and to tidy code first try the JavaScript Beautifier.

Worked example

Type this in main.ts and press Run:

let age: number = "twelve";
console.log(age);

Result: the Problems list shows TS2322 Type 'string' is not assignable to type 'number'. at line 1, column 5, with a short explanation. The JavaScript is let age = "twelve"; and the console prints twelve.

Common mistakes

  • Expecting a type mistake to stop the code: types are removed first, so it still runs.
  • Importing a package such as lodash before adding it: press Add packages first.
  • Pressing Run while utils.ts is open: Run starts the open file, so open main.ts.
  • Leaving a parameter without a type while Strict is on, which gives TS7006.

Frequently asked questions

Is my TypeScript sent anywhere?
No. The TypeScript compiler runs inside your browser, and so does your code when you press Run. Nothing you type is uploaded, and the running code cannot reach the internet.
What is the Problems list?
It lists everything the TypeScript compiler found wrong before running, with the file, line and column, a code such as TS2322, and for the most common ones a short explanation in plain words. Click a problem to jump to its line.
Why does my code run even though there are problems?
TypeScript types are removed before the code runs, so a type mistake does not stop it, just like in a normal project. Fix the Problems to make sure the code does what you meant.
How do I import one file from another, or a package?
Make a file or folder in the file explorer, for example src/utils.ts, export something from it, and write import { name } from './src/utils'. Press Add packages, type a name such as lodash or zustand@4, and press Add. The package is downloaded from esm.sh at that moment (your code is not sent, only the package name), pinned to the exact version, listed with its size, and saved with your project and its zip as package.json. Nothing is downloaded before you press Add. Packages are not type-checked: their types show as any.
What do Target and Strict do?
Target chooses which JavaScript version the result is written for, so newer features are either kept or rewritten. Strict switches on the stricter checks, such as warning when a value might be undefined. Leave it on unless you are learning from older code.
Why did the first run take a moment?
The first run loads the compiler, about 2 MB, once. Your browser keeps it, and later runs are quick.
How do I see the JavaScript that TypeScript produces?
Press Run. The JavaScript of the open file appears under the Problems list, and you can copy it.

Related tools

JavaScript PlaygroundJavaScript BeautifierRegex TesterPython Playground

More Playground

HTML/CSS/JS PlaygroundWrite a web page and see it liveJavaScript PlaygroundRun JavaScript and see the outputReact PlaygroundTry React components liveVue PlaygroundTry Vue components liveSvelte PlaygroundTry Svelte components liveTailwind CSS PlaygroundTry Tailwind classes and see the pageSQLite PlaygroundRun SQL on a small databasePostgres PlaygroundRun PostgreSQL in your browser

View all Playground tools →