TypeScript Formatter

Overview

• Formats TypeScript packed into a single line into a readable form, using Prettier.
• Handles code containing TypeScript-specific type annotations, such as interfaces, type aliases, and generics.
• Uses the same Prettier engine as JavaScript Formatter, switching only the parser to the TypeScript one.

Usage

1. Enter the TypeScript you want to format into the text area.
2. Click the "Format" button.
3. The result, formatted according to Prettier's rules, is displayed below. Use the "Copy" button to copy it to the clipboard.

Example

interface Foo{a:string;b:number}

interface Foo {
  a: string;
  b: number;
}

Use Cases

• Formatting minified TypeScript code into a readable form for debugging
• Unifying the indentation of a type definition file (.d.ts) or code copied from elsewhere to match your project's style
• Formatting a type definition or logic snippet into a consistent style before including it in a code review

FAQ

Notes

• Formatting fails if the TypeScript is syntactically invalid.
• No type checking (type error detection) is performed. This tool only formats syntax.
• Formatting very large code may make browser processing slow.