JSON to Language Struct / Class Generator
About TypeScript Type Formatter
The TypeScript Type Alias Formatter & Prettifier beautifies complex TypeScript `type` aliases, union types (`|`), intersection types (`&`), generic type parameters, and mapped types with consistent spacing and alignment.
How to Use TypeScript Type Formatter
Step 1
Paste your TypeScript `type` declaration into the editor.
Step 2
Select union formatting style (Multi-line leading pipe or Single-line).
Step 3
Review the prettified TypeScript type definition.
Step 4
Click "Copy Formatted Type".
Practical Use Cases for TypeScript Type Formatter
Formatting Complex TypeScript Union & Intersection Types
Format long single-line union types (e.g. `type Status = "draft" | "pending" | ...`) into readable multi-line declarations with leading pipes.
Beautifying Utility & Mapped Types
Clean up nested conditional types (`T extends U ? X : Y`), utility types (`Record<K, V>`), and indexed access types.
Input & Output Examples
Formatting Multi-Line Union Type
`type State="idle"|"loading"|"success"|"error";`
`type State =\n | "idle"\n | "loading"\n | "success"\n | "error";`
Key Features & Performance
- ✓Formats union types with leading pipe style (`| OptionA`) or inline style.
- ✓Alphabetizes union literal members and object type properties.
- ✓Supports conditional types, generic type parameters (`<T, K>`), and template literal types.
- ✓100% Client-Side memory execution.
- ✓1-Click Copy formatted type.
Key Terminology & Definitions
Type Alias (`type`)
A TypeScript declaration that creates a new name for a type, supporting unions, primitives, tuples, and intersections.
Leading Pipe Formatting
The formatting convention of placing union `|` operators at the start of each line for improved readability and minimal Git diff churn.