TypeScript Playground — Run TS in Your Browser

📎 TypeScript

// Welcome to the TypeScript playground!
// Press Run (or Ctrl+Enter) to compile and execute.

// ── Interfaces & type aliases ───────────────────────
interface User {
  id: number;
  name: string;
  role: "admin" | "member";
}

type UserSummary = Pick<User, "name" | "role">;

// ── Generics ─────────────────────────────────────────
function firstOf<T>(items: T[]): T | undefined {
  return items[0];
}

// ── Classes with access modifiers ───────────────────
class Team {
  private members: User[] = [];

constructor(public readonly name: string) {}

add(user: User): void {
    this.members.push(user);
  }

summarize(): UserSummary[] {
    return this.members.map(({ name, role }) => ({ name, role }));
  }
}

// ── Enums ────────────────────────────────────────────
enum Status {
  Active = "ACTIVE",
  Archived = "ARCHIVED",
}

// ── Putting it together ─────────────────────────────
const team = new Team("Platform");
team.add({ id: 1, name: "Ada Lovelace", role: "admin" });
team.add({ id: 2, name: "Grace Hopper", role: "member" });

console.log(`Team: ${team.name}`);
console.log("Members:", team.summarize());
console.log("First member type:", firstOf(team.summarize())?.role);
console.log("Status:", Status.Active);

Output

Press Run to load the TypeScript compiler and execute…

Ctrl+Enter to run · Compiles then runs in a sandboxed function · Your code is never sent to a server

Try these examples

Click any example to load it into the editor above, then hit Run.

How this works

This playground loads the real, official TypeScript compiler (version 5.9) from a CDN and runs it entirely client-side — nothing is sent to a server. Your TypeScript is transpiled to JavaScript, then executed in a sandboxed function with console.log/error/warn captured and displayed below the editor.

Honest scope note: this playground uses TypeScript's transpileModule API, which strips types and compiles each file in isolation — it will catch syntax errors, but it does not perform full cross-file type-checking (that requires loading the standard-library type definitions and building a full compiler Program, which the official TypeScript Playground does). So code with a real type error — like assigning a number to a string — will still compile and run here, exactly as if you'd run tsc --noCheck. For full type-checking against your code, use the official Playground linked above.

Why 5.9, not the newest release? TypeScript 6.0 (March 2026) was the last version built on the JavaScript-based compiler; TypeScript 7.0 (shipped as GA in July 2026) rewrote the compiler natively in Go for roughly 10× faster type-checking. That's a major win for local tooling, but it means the newest compiler isn't currently distributed as a browser-loadable JavaScript bundle the way 5.x always was — so this playground uses TypeScript 5.9.2, the most recent version with an official browser-compatible build. The language syntax it accepts (interfaces, generics, enums, utility types, etc.) is unchanged by the 7.0 rewrite.

What to try next

TypeScript language reference — 29 topic pages, from basics to advanced generics
TypeScript snippets — copy-ready idiomatic patterns
Learn TypeScript — structured lessons
Official TypeScript Playground — for full type-checking against the standard library