TypeScript Formatter

TypeScript Formatter: Indent and Readable-ize TypeScript Code

TypeScript code copied from a minified bundle, a code snippet, or a poorly formatted file is hard to read. This formatter adds proper indentation based on brace depth and places each statement on its own line — while preserving type annotations, interfaces, and generics exactly as written.

Formula

Same brace-depth state machine as JS beautifier Type annotations (': Type', '<T>', 'as Type') passed through as-is Interface and type alias blocks indented by brace depth Generic angle brackets < > not treated as nesting depth

TypeScript's type system syntax is not parsed — only braces { } are tracked for indentation. This is correct for interfaces, classes, and function bodies.

TypeScript-Specific Constructs

Type annotations (: string, : number[]), interface blocks ({key: Type}), generic parameters (), and union/intersection types (A | B, A & B) all contain no { } characters that affect brace depth, so they are passed through identically. Only the structural blocks — function bodies, class bodies, interface bodies — are re-indented.

Interfaces and Type Aliases

An interface like `interface User { id: number; name: string; }` uses { and }, so the formatter correctly places each property on its own indented line. Type aliases using object types work the same way. Mapped types and conditional types are preserved as-is since they use { } only for the mapped type body.

When to Use Prettier Instead

For TypeScript source code in a codebase, configure Prettier with @prettier/plugin-typescript and let it run on save. Prettier handles trailing commas, semicolon preferences, import sorting, and line length limits. This tool is for ad-hoc formatting of a snippet, reviewing a function before adding it to your project, or quickly reading minified TypeScript.

Practical Examples

Reading a Generated TypeScript API Client

API client generators often produce dense, minimally-formatted TypeScript. Beautify to review.

1.Copy the generated TypeScript API client or type file
2.Paste here and select 2-space indent (common in TS projects)
3.The interfaces and functions are indented and readable
4.Review the generated types before adding them to your project

What Gets Formatted

Function and class bodies indented by brace depth
Interface and type alias object bodies indented correctly
Each statement ending with ; placed on its own line
String literals and template literals passed through unchanged

Good Use Cases

Formatting auto-generated TypeScript API clients or type files
Making minified TypeScript readable for debugging or review
Cleaning up TypeScript pasted from Stack Overflow or documentation
Quickly reviewing a TypeScript snippet before integrating it

Frequently Asked Questions

Does the formatter understand TypeScript types?

The formatter is indentation-based — it does not parse TypeScript's type system. Type annotations, interfaces, generics (), and union types (A | B) are preserved as-is. The formatter only adds newlines and indentation at { } and ;.

Are interfaces and type aliases formatted correctly?

Yes. An interface or type alias block uses { and }, so the formatter correctly indents the members within the block. Each member ending with ; gets its own line.

Can I use this for TSX (TypeScript with JSX)?

Partially. The brace-depth formatter handles TypeScript syntax correctly, but JSX angle brackets () can confuse the whitespace logic. For TSX, it is better to use Prettier with the TypeScript/React plugins.

What indent size should I use?

The TypeScript community and most large projects (Angular, NestJS, Next.js) use 2-space indentation. 4 spaces is the historical standard. Choose based on your project's existing convention.