TypeScript Formatter

A TypeScript formatter that understands types

This TypeScript formatter uses Prettier with the official TypeScript parser (the typescript-estree parser also used by typescript-eslint). Because it parses real TypeScript, it knows the difference between a generic <T> and a comparison, lays out union types and interfaces properly, and never strips your annotations.

Example

type Result<T>={ok:true,value:T}|{ok:false,error:string}
enum Role{Admin='admin',User='user'}
export async function load<T>(url:string,opts?:RequestInit):Promise<Result<T>>{const res=await fetch(url,opts);if(!res.ok)return{ok:false,error:res.statusText};return{ok:true,value:await res.json() as T}}

Formatted with the default 80-column width:

type Result<T> = { ok: true; value: T } | { ok: false; error: string };
enum Role {
  Admin = "admin",
  User = "user",
}
export async function load<T>(
  url: string,
  opts?: RequestInit,
): Promise<Result<T>> {
  const res = await fetch(url, opts);
  if (!res.ok) return { ok: false, error: res.statusText };
  return { ok: true, value: (await res.json()) as T };
}

A few TypeScript-specific details are visible here. Commas inside object type literals became semicolons, which is the conventional separator for type members. The signature was too long, so each parameter moved to its own line with a trailing comma. And Prettier added parentheses around await res.json() before as T to make the precedence obvious.

What the formatter handles

• Interfaces, type aliases, mapped and conditional types (T extends U ? X : Y), template literal types.
• Enums, namespaces, abstract classes, access modifiers and parameter properties such as constructor(private repo: Repo).
• Decorators used by Angular, NestJS and TypeORM.
• satisfies, as const, non-null assertions (user!.id), optional chaining and type-only imports (import type).
• TSX: JSX inside .tsx files is formatted like React code.

Options

Indent and Line width control layout; the Angular and Microsoft TypeScript style guides both use 2 spaces, and Prettier's 80-column default suits side-by-side diffs. Semicolons and Single quotes match the corresponding Prettier options. Trailing commas are always added where TypeScript allows them (Prettier's "all" setting).

TypeScript style conventions worth knowing

Prettier handles whitespace, but a few conventions sit next to formatting and are worth following so the output reads naturally:

• Naming: PascalCase for types, interfaces, classes and enums; camelCase for variables, functions and properties. The TypeScript handbook and Google's TypeScript style guide both use this split.
• No I prefix on interfaces (User, not IUser) in most modern code bases.
• Prefer type aliases for unions and interface for object shapes you expect to extend; the formatter prints both the same way.
• Semicolons and double quotes are Prettier's defaults and the most common choice in TypeScript projects, including the TypeScript compiler repository itself.

Formatting is not type checking

The formatter only needs syntactically valid code. A type error such as assigning a string to a number is formatted without complaint, because finding it requires the TypeScript compiler and your whole project. Syntax errors, on the other hand, stop formatting:

• "'>' expected" in a .ts snippet often means JSX without TSX context or an unclosed generic.
• "Declaration or statement expected" usually points to an extra closing brace.
• Old-style type assertions (<Foo>bar) cannot be used inside TSX; use bar as Foo.

Related tools

Need types for an API response? Generate interfaces with JSON to TypeScript, then paste them here to match your style. For plain JavaScript use JavaScript Pretty Print. Your code is formatted locally in the browser and is not uploaded.