This TypeScript online compiler turns TypeScript into JavaScript in your browser with the TypeScript 5.8 compiler, runs the result and prints its console output. It is an independent TS playground built by WebFiddle, not the official TypeScript Playground at typescriptlang.org/play. The compiled JavaScript and the console update about a second after you stop typing, and the editor underlines type errors as you write. Use it to try a language feature, see what an annotation compiles to or share a snippet, without installing Node.js, npm or a tsconfig.json file.
T extends HasId lets findById accept any object that has a numeric id while keeping the full element type in the return value.
interface HasId {
id: number;
}
function findById<T extends HasId>(items: T[], id: number): T | undefined {
return items.find((item) => item.id === id);
}
const users = [
{ id: 1, name: "Ada" },
{ id: 2, name: "Linus" },
];
console.log(findById(users, 2)?.name); // "Linus"
Assigning the leftover value to never makes the compiler flag any shape you forget to handle. Switch the target to ES2015 to see how the ** operator is compiled.
type Shape =
| { kind: "circle"; radius: number }
| { kind: "rect"; width: number; height: number };
function area(shape: Shape): number {
switch (shape.kind) {
case "circle":
return Math.PI * shape.radius ** 2;
case "rect":
return shape.width * shape.height;
default: {
const unreachable: never = shape;
return unreachable;
}
}
}
console.log(area({ kind: "rect", width: 3, height: 4 })); // 12
console.log(area({ kind: "circle", radius: 1 }).toFixed(2)); // "3.14"
satisfies checks the object against a type without widening its properties, so config.retries stays a number. The playground wraps your code in an async function, so the final await runs even if the editor underlines it.
const config = {
retries: 3,
endpoint: "/api/items",
} satisfies Record<string, string | number>;
const wait = (ms: number) =>
new Promise<void>((resolve) => setTimeout(resolve, ms));
async function main(): Promise<void> {
for (let attempt = 1; attempt <= config.retries; attempt++) {
await wait(200);
console.log("Attempt " + attempt + " of " + config.retries + " to " + config.endpoint);
}
}
await main();
A TypeScript online compiler turns TypeScript into JavaScript as you type and runs the result, without setting up Node.js, npm or a tsconfig.json file. This one, a TS playground that works in your browser, uses the TypeScript 5.8 compiler, shows the emitted JavaScript beside your code and prints console output underneath it.
No. The official TypeScript Playground is maintained by the TypeScript team at typescriptlang.org/play. This TS playground is an independent online compiler built by WebFiddle: it bundles the TypeScript 5.8 compiler from the typescript npm package, runs the compiled JavaScript and prints console output underneath, and it shares code through a compressed link.
It bundles the TypeScript 5.8 compiler from the typescript npm package, and the exact build number is shown in the status bar at the bottom of the playground. Language features released up to TypeScript 5.8, such as satisfies, const type parameters and standard decorators, compile here.
The playground transpiles each file in isolation, the same way tools such as Babel and esbuild remove types, so type errors do not block the output. They are still reported: the editor underlines them in red and hovering an underline shows the message. Syntax errors are listed in the Console panel.
Type your code in the left editor. About one second after you stop typing, the Compiled JavaScript panel shows the emitted code for the target chosen in Compiler Settings: ES2015, ES2020 or ESNext. With ES2015, for example, optional chaining and the ** operator are rewritten into older equivalent JavaScript.
No. Your code runs as a single script inside the page, so import and export statements cause a syntax error. Built-in JavaScript objects and browser APIs such as Map, Promise, JSON and fetch are available. For code that depends on npm packages, use a local project with the typescript package installed.
No. Compiling and running both happen in your browser, and nothing is uploaded while you type or run code. Your code only leaves your device if you press Share, which puts it into a compressed link that you choose to send. The playground does not keep a copy on a WebFiddle server.
Paste this iframe into any web page and readers can run code without leaving it. The snippet travels in the URL, so there is nothing to host and no account to create. Open the sandbox, write your example, press Share, then append that link’s query string to the embed URL to preload it.
<iframe src="https://webfiddle.xyz/embed/typescript" width="100%" height="480" loading="lazy"
style="border:1px solid #ddd;border-radius:8px"
title="WebFiddle typescript sandbox"></iframe>