TypeScript
JavaScript
Compiled JavaScript appears here
Start typing TypeScript on the left// compile TypeScript to JavaScript instantly in the browser
Paste TypeScript and see the compiled JavaScript output instantly. Real TypeScript compiler in the browser. Configurable target (ES5–ESNext), strict mode, decorators, and more. Free.
Compiled JavaScript appears here
Start typing TypeScript on the leftType or paste TypeScript code on the left. The compiler runs automatically as you type and shows the JavaScript output on the right. Click an example chip to load a sample program.
Adjust the compilation target (ES5 through ESNext), module format, strict mode, decorators, and declaration file generation using the toolbar controls.
Type errors appear in the Errors tab with line and column numbers. The .d.ts tab shows the generated declaration file when enabled. Copy or download the compiled JS.
TypeScript Playground runs the real TypeScript compiler (typescript.js) entirely in the browser. It compiles TypeScript to JavaScript with configurable options, shows type errors with precise locations, and optionally generates declaration files — with no server, no upload, and no sign-up required.
Yes. This tool loads the official TypeScript compiler (typescript.js) from the jsDelivr CDN and runs it directly in your browser using the ts.transpileModule() and ts.createProgram() APIs. The compilation and type checking are performed by the same compiler used in tsc, VS Code, and the official TypeScript Playground. No server is involved — all processing happens in your browser.
The tool loads TypeScript 5.x from the jsDelivr CDN. The exact version is shown in the toolbar after the compiler loads. The version used matches the latest stable release of TypeScript available on the CDN at the time the page was last deployed. This means it supports all features added up to TypeScript 5.x, including const type parameters, variadic tuple types, decorators, and all other recent additions.
The target option controls which JavaScript syntax the compiler outputs. ES5 produces the most compatible output — arrow functions are converted to regular functions, classes are converted to prototype-based code, and template literals become string concatenation. ES2022 or ESNext produces modern JavaScript that closely mirrors the TypeScript input, with only the type annotations removed. Choose a lower target if you need to support older browsers.
The strict compiler flag enables a collection of type-checking rules: strictNullChecks (null and undefined are not assignable to other types), strictFunctionTypes (stricter function type compatibility), strictBindCallApply, strictPropertyInitialization (class properties must be initialised), noImplicitAny (variables cannot implicitly have type any), and noImplicitThis. Strict mode is recommended for new projects.
Declaration files (.d.ts) describe the types of a JavaScript module without containing executable code. They tell TypeScript's type checker what functions and types a module exports, enabling type checking across module boundaries. When you publish an npm package written in TypeScript, you typically also publish the generated declaration files so that consumers get type checking and autocomplete. Enable the .d.ts option in the toolbar to see the declaration output for your code.
Yes. Enable the Decorators checkbox in the toolbar to turn on experimentalDecorators. TypeScript 5.0 introduced standard decorators (Stage 3 proposal), which are enabled automatically on modern targets. The experimental decorators mode enables the legacy decorator implementation used by frameworks like Angular and NestJS. Both modes are supported in this playground.
TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. Understanding what the compiler produces from your TypeScript code is essential for debugging, optimisation, and learning the language. This playground runs the official TypeScript compiler in the browser, so you can see exactly how interfaces disappear at runtime, how generics compile to regular functions, and how decorators are transformed into descriptor-based code.
The most fundamental thing TypeScript does at compile time is type erasure — it removes all type annotations, interface declarations, and type assertions from the code, leaving only valid JavaScript. A TypeScript function like function greet(name: string): string compiles to exactly function greet(name). Type information exists only during development for the type checker; it is completely absent at runtime. This is why TypeScript does not provide runtime type guards — those must be written in JavaScript.
The compilation target determines which JavaScript features the compiler uses in its output. When targeting ES5, TypeScript must polyfill or transform modern syntax: arrow functions become regular functions, classes are rewritten using prototypes and closure patterns, template literals become string concatenation, and destructuring is expanded. When targeting ES2022 or later, the compiler can emit most modern syntax directly, producing output that is almost identical to the TypeScript input with type annotations removed.
TypeScript generics are a compile-time feature only. A generic function function identity compiles to exactly function identity(x) { return x; } — the type parameter T is erased entirely. This means generics have zero runtime overhead. They exist solely to communicate type constraints to the compiler and to IDE tools. Understanding this makes it clear why runtime generic type access (like typeof T) is not possible in TypeScript.