TypeScript Compiler (Online TS Playground)

main.ts 
// Write code here, then press Run (Ctrl/Cmd + Enter).
function greet(name: string): string {
  return `Hello, ${name}!`;
}

console.log(greet('World'));
Output

Press Run (Ctrl + Enter) to see the output.

About this online TypeScript compiler

This online TypeScript compiler checks your types and runs your code in the browser, so you get both answers at once: what TypeScript thinks of your types, and what the program prints. No install, no tsconfig, no sign-up.

Type errors are underlined in the editor a moment after you stop typing, with the full message on hover, and they are listed under the output when you run. The types are then removed and the JavaScript that is left runs straight away, so errors at runtime still point at your own line numbers.

How to use the TypeScript compiler

  1. Write TypeScript in the editor: interfaces, generics, unions, classes and anything else.
  2. Watch for red underlines: hover one, or press Ctrl + Shift + M, to read the type error.
  3. Press Run, or Ctrl + Enter, to run the code and see its console output.
  4. Press Share to save your code as an image or send a link to it.

Keyboard shortcuts

Ctrl + Enter (Cmd + Enter on a Mac)
Run the code
Ctrl + Shift + M (Cmd + Shift + M on a Mac)
Open the list of type errors in the editor
Ctrl + / (Cmd + / on a Mac)
Comment or uncomment the selected lines
Ctrl + Z, Ctrl + Shift + Z
Undo and redo
Tab, Shift + Tab
Indent or outdent the selection
Escape, then Tab
Leave the editor and move to the next control

What it supports

  • The real TypeScript type checker in strict mode, with the ES2022 and DOM library types.
  • Interfaces, type aliases, generics, unions and narrowing, enums, classes with access modifiers, satisfies, and the utility types such as Partial, Pick and Record.
  • Type errors as editor underlines and as a list in the Output panel, each with its line.
  • Console output and runtime errors with line numbers, like the JavaScript compiler.

Limits to know

  • One file: import and export statements and namespace blocks are not supported.
  • Code runs in the same isolated sandbox as the JavaScript compiler: no network, no packages, and an 8 second limit per run.
  • Like tsc, the code still runs when it has type errors, so you can see both.

Example: A typed function

main.ts

function total(prices: number[]): number {
  return prices.reduce((sum, p) => sum + p, 0);
}
console.log(total([3, 4.5]));

Output

7.5

Frequently asked questions

Is this TypeScript playground free?

Yes. Every editor in the DevArcade playground is free to use, with no sign-up, no account and no limit on runs.

Can I run TypeScript online without installing anything?

Yes. Everything happens in your browser: the type checker reads your code, the types are removed, and the JavaScript that is left runs at once. You do not need Node.js, npm or a tsconfig file.

Does it really check types?

Yes. It uses the TypeScript compiler itself in strict mode. Errors are underlined as you type and listed when you press Run, with the line and the message.

Why does my code run when it has type errors?

TypeScript types do not exist at runtime, so a program with type errors can still run, just as tsc still emits JavaScript by default. The type errors are shown next to the output so you can fix them.

How do I share TypeScript code?

Press the share key next to Run. Copy link packs the code into the link itself, so whoever opens it sees your code and can run it with one press of Run; nothing is uploaded to a server. You can also save the code as a PNG image to post anywhere.

Also try