TypeScript Formatter

Examples

type User={id:string;name:string}

type User = { id: string; name: string };

interface User{id:string;roles:string[]}

interface User {
  id: string;
  roles: string[];
}

function identity<T>(value:T):T{return value}

function identity<T>(value: T): T {
  return value;
}

type Status='idle'|'loading'|'error'

type Status = "idle" | "loading" | "error";

const cfg={retry:3,debug:false}

const cfg = { retry: 3, debug: false };

How to use

1. Paste a TypeScript snippet (type, interface, or short module fragment).
2. Review the indented output; fix parse errors if formatting fails.
3. Copy the result into your PR or notes.

What this tool is for

Dense generics and one-line interfaces are hard to review in a ticket. This page normalizes whitespace and wrapping while preserving type syntax the parser understands. It is a formatter, not tsc — invalid types can still format if the syntax parses.

How it works

Pretty mode runs Prettier with the TypeScript parser. Indent follows your tab width setting (default 2). Minify collapses whitespace with a simple pass. Exotic experimental syntax may fail to parse.

When to use it

Cleaning a type copied from a library .d.ts, reviewing a generic-heavy snippet, preparing a PR comment, and normalizing a short TSX-ish example.

When not to use it

Not a typechecker. Not a compiler to JavaScript. Plain JS without types can use the JavaScript Formatter. JSON belongs on the JSON Formatter.

How it compares to related tools

JavaScript Formatter for plain JS. JSON Formatter for data. Repo `tsc` and ESLint remain the authorities for correctness.

Common mistakes

Expecting `any` to be flagged. Pasting a whole tsconfig project. Assuming format failure means a type error (it is usually syntax).

Format is not typecheck

Prettier will happily format a type that tsc would reject, as long as the syntax is parseable. Run your IDE or `tsc --noEmit` for real errors. Conversely, a format failure usually means broken syntax, not a semantic type mismatch.

TSX and project config

Simple component snippets often format. Edge-case JSX and project-specific path aliases are better handled in your editor with the repo Prettier config. This page does not load your tsconfig.

Related tools