TypeScript Playground (Offline)

A TypeScript to JavaScript transpiler strips the type layer from your code so it can run anywhere JavaScript runs. TypeScript types exist only at compile time; the runtime sees plain JavaScript. This offline playground performs that conversion — called type erasure — in your browser, with no tsc install and no upload, so you can quickly see what your code becomes at runtime.

Type erasure vs type checking — an important distinction

This tool performs type erasure, not type checking. These are two separate operations:

• Type checking (tsc --noEmit) reads your types, verifies they are consistent, and reports errors. It produces no JavaScript output.
• Type erasure removes the type syntax and produces JavaScript. It deliberately ignores type errors, exactly the way esbuild, swc, Babel --preset-typescript, and tsc under isolatedModules all work.

This tool is useful when you want to see what your TypeScript becomes at runtime, experiment with enum output, or convert a snippet for a JavaScript context — not for checking whether your types are correct. For type correctness, use your editor or tsc --noEmit.

How it works

The transpiler tokenizes your source with a parser that recognises strings, template literals, regular expressions, and comments as opaque units, then walks the tokens with a brace-context stack.

That context stack is what makes the conversion correct: inside an object literal a : is a real key-value separator and must be kept, while elsewhere a : introduces a type annotation and is removed along with the type expression that follows it. The transpiler also:

• Deletes whole interface and type declarations
• Removes generic type parameters like <T>
• Drops as/satisfies casts and non-null ! assertions
• Strips access modifiers such as private and readonly
• Rewrites each enum into an equivalent JavaScript object with auto-incrementing values

Worked example

enum Role { Admin, Editor }

interface User { id: number; name: string }

function greet(u: User): string {
  return "Hi " + u.name;
}

const current = greet({ id: 1, name: "Mia" } as User);

becomes:

const Role = { Admin: 0, Editor: 1 };



function greet(u) {
  return "Hi " + u.name;
}

const current = greet({ id: 1, name: "Mia" });

The interface declaration and : string, : User annotations are erased entirely. Blank lines appear where whole-declaration nodes were removed. The enum becomes a plain object literal. The as User cast vanishes without a trace.

What it does not do

• No type checking — type errors are silently ignored
• No syntax down-levelling — optional chaining, async/await, and decorators are emitted as-is
• No module bundling — import/export statements are unchanged

For legacy targets, pipe the output through Babel or set a target in a full tsc build. Everything runs locally in your browser and nothing is uploaded.