TypeScript Formatter

About the TypeScript Formatter

What is a TypeScript formatter?

A TypeScript formatter cleans up dense or minified TS the same way a JS beautifier does (consistent indentation, one statement per line, readable spacing) while coping with the syntax TypeScript adds on top: interfaces, type aliases, generics, enums, access modifiers, and decorators. This tool formats live as you type, with TypeScript syntax highlighting on both editors.

It runs on the Prettier engine with Prettier's own TypeScript parser, bundled locally with the page, no CDN fetch, no upload, works offline. Prettier reads your code into a full syntax tree and prints it again from scratch, so generics stay tight (get<T>(x), not get < T > (x)) and the output matches what Prettier would produce in your editor. The trade-off is that the parser has to understand the whole file, so a half-finished refactor is reported as a syntax error instead of being formatted on a best-effort basis.

How to Use This Tool

1. Add your code. Paste TypeScript into the left editor, open a .ts file, or click Sample.
2. Watch it format. The beautified output appears live on the right.
3. Tune the style. Choose your indentation, single or double quotes, and whether semicolons are added.
4. Take the result. Copy it or download it as a .ts file.

Example

Types and a function squashed together will be converted to spaced, indented TypeScript:

interface User{id:number;name:string}
type Role="admin"|"editor";
function find(list:User[],id:number):User|undefined{return list.find(u=>u.id===id)}

interface User {
    id: number;name: string
}
type Role = "admin" | "editor";

function find(list: User[], id: number): User | undefined {
    return list.find(u => u.id === id)
}

Union types get spaces around the pipe and the function signature is broken out. Interface members separated by semicolons stay on one line, which is valid but worth knowing before you paste it into a style-checked repo.

Common Use Cases

• Reading compiled or bundled TS: Expand compressed code into a reviewable form.
• Normalizing pasted code: Bring snippets from PRs, docs, and chat into a consistent style.
• Cleaning up type declarations: Make dense interface and type-alias blocks readable again.
• Style conversion: Switch a file between 2-space, 4-space, and tab indentation, or between single and double quotes.
• Sharing examples: Format consistently for documentation and teaching material.

Working with plain JS? Use the JavaScript Formatter, format React/JSX, or convert types with JSON to TypeScript.

Frequently Asked Questions

Does it support interfaces, generics, and enums?

Yes. Interfaces, type aliases, unions, generics, enums, access modifiers, and decorators all pass through correctly and get standard indentation. Generic angle brackets stay tight against the name they belong to rather than being spaced out like comparison operators.

Will formatting change my types or behavior?

No. Formatting only changes layout, quote style, and semicolons, all of which the compiler ignores. Every identifier, type, and value is preserved in order, so both the runtime behavior and the type checking stay identical.

Can it format .tsx files?

For TSX use the React Formatter, which enables JSX handling so your markup is preserved untouched. This page is tuned for plain .ts files.

Does the output match Prettier?

Yes. This tool runs the Prettier engine itself with Prettier's TypeScript parser, bundled with the page rather than fetched from a CDN, so the result is what Prettier would print in your editor at the same indentation, quote, and semicolon settings.

What happens if my code has a syntax error?

The status badge turns red and names the problem, and the output pane stays empty rather than showing a half-formatted guess. Because the formatter builds a full syntax tree, it needs the file to parse before it can reprint it. Fix the reported line and formatting resumes as you type.

Is my code uploaded anywhere?

No. The formatter is bundled with the page and runs locally in your browser (no CDN requests, no uploads, no logging) and keeps working offline.