Write TypeScript and get type errors as you type from the official compiler, then see the JavaScript it emits for your chosen target and run it with a built-in console. Everything runs in your browser.
Last updated:
Loading the TypeScript compiler…
Runs in a sandboxed Web Worker (no DOM), stopped after 5 s of busy work.
Advertisement
Advertisement
How to use the TypeScript Playground
Write or paste TypeScript in the editor, or pick an example from the list.
Watch the status line and the Errors tab: type errors appear within a moment, with red line numbers in the editor gutter.
Choose the target and module format to see how the emitted JavaScript changes, and toggle strict mode or DOM types.
Click Run (or press Ctrl+Enter) to execute the code; output appears in the Console tab.
Copy or download the JavaScript, view the .d.ts tab, or click Copy link to share the code.
How TypeScript turns into JavaScript
Compiling TypeScript does two independent things. The type checker reads your code and reports mismatches such as passing a string where a number is expected. The emitter removes the type annotations and, depending on the target, rewrites newer syntax into older JavaScript. Because the two are separate, the JavaScript is produced even when there are type errors, which is why this playground can show the output and run it while the Errors tab lists problems.
Compiler options in this playground
Option
tsconfig.json equivalent
Effect
Target
"target": "ES2020"
JavaScript version of the output and the built-in library types (Promise, Map, Array.prototype.flat…)
Module
"module": "ESNext"
Keeps import/export, or converts them to require/exports (CommonJS)
strict
"strict": true
Enables strictNullChecks, noImplicitAny, strictFunctionTypes, strictBindCallApply, strictPropertyInitialization and more
noUnused…
"noUnusedLocals", "noUnusedParameters"
Reports variables, imports and parameters that are never used (prefix a parameter with _ to allow it)
DOM types
"lib": ["ES2020", "DOM", "DOM.Iterable"]
Adds type definitions for document, window, fetch and other browser APIs
Common error codes
Code
Message (short)
Typical fix
TS2322
Type 'X' is not assignable to type 'Y'
Change the value, widen the declared type or convert the value (for example Number(id))
TS2345
Argument of type 'X' is not assignable to parameter of type 'Y'
Pass the expected type or adjust the function signature
TS2339
Property 'x' does not exist on type 'Y'
Add the property to the interface, or narrow a union with in or a discriminant check
TS2531 / TS18047
Object is possibly 'null'
Check for null first, use optional chaining a?.b or a default with ??
TS7006
Parameter 'x' implicitly has an 'any' type
Annotate the parameter: (x: string) => …
TS2304
Cannot find name 'x'
Declare the variable, fix the spelling, or enable DOM types for browser globals
TS2307
Cannot find module 'x'
Imports of npm packages are not available in a single-file playground
Tip: when a type error is hard to read, assign the value to a variable with the type you expect (const check: Expected = value;) and read the more specific message that appears.
Frequently asked questions
Is this the real TypeScript compiler?
Yes. The page loads the official typescript package (version 5.6.3) and type-checks your code with the same compiler API that tsc and editors use, against the standard library definitions for the target you choose. The first load downloads a few megabytes, after which checking is instant.
Why does my code run even though it has type errors?
TypeScript types only exist at compile time. The compiler still emits JavaScript when there are type errors (unless noEmitOnError is set), so the playground runs the emitted code anyway and notes the number of errors in the console. Fix the errors to be sure the code behaves as typed.
What does the target option change?
The target is the JavaScript version the output must run on. ES2020 and newer keep modern syntax such as optional chaining, while ES2015 and ES5 rewrite it into older code, for example classes into functions on ES5 and async functions into generator helpers. The target also selects which built-in APIs the type checker knows about.
What does strict mode do?
strict turns on a family of checks including strictNullChecks, noImplicitAny, strictFunctionTypes and strictPropertyInitialization. With it, null and undefined must be handled explicitly and every value needs a known type. It is the recommended setting for new projects and is on by default here.
Can I import npm packages or use the DOM?
No packages can be imported: the playground checks a single file, so an import of a library reports that the module cannot be found. DOM types can be enabled for type checking, but the Run button executes code in a Web Worker without a page, so document and window are not available at run time.
Is my code sent to a server?
No. Compiling and running happen in your browser. The code is saved only in this browser's local storage, and the Copy link button puts it in the link itself, after the # sign, which browsers do not send to servers.
Are all the tools on FreeToolCabin tested for quality and accuracy?
Yes! Every tool on our site undergoes automated Q/A testing in real browser environments to ensure high precision, correct output, and zero errors. If you happen to spot a bug or have a suggestion, please contact us at [email protected] and our team will review it right away.