TypeScript Formatter

What a TypeScript formatter does

TypeScript adds types to JavaScript: interfaces, generics, enums, unions and annotations on every parameter. All that extra syntax makes layout more important. A long function signature with generic parameters and a return type is hard to read on one line, and object types written by different people drift apart in style.

This formatter runs Prettier 3 with the TypeScript parser in your browser. It reads your code, then prints it back with one consistent layout. The code itself, including every type, stays exactly the same.

How to use it

1. Paste TypeScript into the left box. It is formatted as soon as you paste.
2. Or press Open file to load a .ts file, or Sample to try an example.
3. Choose your options: Indent (2 spaces, 4 spaces or Tabs), Line width (80 to 160), Trailing commas (All, ES5 or None), Single quotes and Semicolons.
4. Press Format or Ctrl+Enter.
5. Press Copy, or Download to save a .ts file.

The first format loads the TypeScript parser. After that the output updates while you type.

Before and after

Compressed input:

interface User{id:number;name:string;email?:string}export function greet(user:User,greeting:string='Hello'):string{return `${greeting}, ${user.name}`}const users:User[]=[{id:1,name:'Ada'},{id:2,name:'Linus'}]

After Format with the defaults:

interface User {
  id: number;
  name: string;
  email?: string;
}
export function greet(user: User, greeting: string = "Hello"): string {
  return `${greeting}, ${user.name}`;
}
const users: User[] = [
  { id: 1, name: "Ada" },
  { id: 2, name: "Linus" },
];

Each interface member gets its own line, annotations get a space after the colon, and the array of objects is split because it would pass 80 characters on one line. Short objects stay on one line inside the array.

Generics and type aliases are handled the same way:

type ApiResponse<T> = { data: T; error?: string };
async function get<T>(url: string): Promise<ApiResponse<T>> {
  const r = await fetch(url);
  return r.json() as Promise<ApiResponse<T>>;
}

Classes with access modifiers and the ?? operator:

class Cart {
  private items: Map<string, number> = new Map();
  add(id: string, qty = 1): void {
    this.items.set(id, (this.items.get(id) ?? 0) + qty);
  }
}

With Indent set to Tabs, an enum looks like this (each member starts with a tab):

enum Role {
	Admin = "admin",
	Editor = "editor",
}

Syntax errors

When the code cannot be parsed, you get the TypeScript parser’s message with a position. Two examples:

• let count: number = ; gives Line 1, column 21: Expression expected.
• function add(a: number, b: number { gives Line 1, column 35: ',' expected., pointing at the place where the closing parenthesis is missing.

Press Show in input to put the cursor on the problem.

Remember that a clean format is not a clean compile. This line formats fine even though it is a type error:

let count: number = "five";

Only the TypeScript compiler catches that.

Tips

• If your project has a .prettierrc, set the same options here so the output matches your repository.
• The Trailing commas setting All also adds commas after the last type parameter and function parameter when they wrap. Pick ES5 if you prefer commas only in arrays and objects.
• For .tsx files with React, the TypeScript parser handles JSX as well.
• Formatting a GraphQL schema that sits next to your types? Use the GraphQL formatter. For JSON config such as tsconfig.json, note that it allows comments, which strict JSON does not; the JSON formatter will flag them.

Other ways to format TypeScript

• VS Code ships with a TypeScript formatter. Run Format Document (Shift+Alt+F on Windows, Shift+Option+F on macOS). For output that matches this page, install the Prettier extension and select it as the default formatter.
• Command line: npx prettier --write "src/**/*.ts" formats a whole folder.
• Pre-commit hooks: tools like lint-staged can run Prettier on changed files before each commit, so formatting never reaches code review.

For plain JavaScript files, the JavaScript formatter offers the same options with a smaller download.