TypeScript Formatter
Free TypeScript formatter: beautify TS and TSX with Prettier, choose quotes, semicolons and width, and check syntax with line and column. Runs in your browser.
How to use TypeScript Formatter
- 1Paste TypeScript, or open a .ts or .tsx file. Turn on Parse TSX if the code contains JSX.
- 2Set indentation, quotes, semicolons and print width. The formatted result updates as you type.
- 3Copy or download the result, or switch to Validate for a syntax-only check.
What makes it better
- Formats interfaces, type aliases, generics, enums, abstract classes and type assertions
- Parse TSX toggle for React components written in TypeScript
- Syntax errors come with line, column and the offending line
- Same option set as the JavaScript formatter, with trailing commas and arrow parentheses under More options
- Validate mode is syntax only and says so; it never runs or compiles your code
About TypeScript Formatter
This page formats TypeScript with Prettier's TypeScript parser, handling interfaces, generics, enums, decorators and type assertions. A Parse TSX switch decides whether angle brackets are JSX or type casts. It checks syntax only, not types, and it has no Minify mode because TypeScript must be compiled to JavaScript before it can be minified.
Common uses
- Tidy a type definition or API client pasted from documentation.
- Normalise a snippet to your team's quote and semicolon style before a pull request.
- Check that a generated .d.ts or schema-to-types output parses.
- Read compact TypeScript from a gist or chat message without opening an editor.
Example
Input
interface User{id:number;name:string;email?:string}
type Role='admin'|'editor'|'viewer'
async function loadUser<T extends User>(id:number):Promise<T|null>{const res=await fetch('/api/users/'+id);return res.ok?(await res.json() as T):null}
enum Status{Active,Inactive}Result
interface User {
id: number;
name: string;
email?: string;
}
type Role = "admin" | "editor" | "viewer";
async function loadUser<T extends User>(id: number): Promise<T | null> {
const res = await fetch("/api/users/" + id);
return res.ok ? ((await res.json()) as T) : null;
}
enum Status {
Active,
Inactive,
}
Good to know
- Validate checks syntax only. It does not run the TypeScript compiler, so type errors, missing imports and wrong property names are not reported.
- TypeScript cannot be minified directly. Compile it to JavaScript first, then use the JavaScript minifier.
- Angle-bracket casts (<T>value) and JSX conflict, so pick TSX or plain TypeScript to match your file. A file that fails in one mode may parse in the other.
TypeScript Formatter FAQ
How do I format TypeScript online?
Paste the code and the formatted TypeScript shows up beside it. Change quotes, semicolons or print width in the options row and the output follows, ready to copy or download as a .ts file.
What does Parse TSX do?
It tells the parser to read angle brackets as JSX elements, the way a .tsx file does. With it off, <Type>value is read as a type assertion instead. Switch it if you see an unexpected-token error near a tag.
Does Validate check my types?
No. It only confirms the text is syntactically valid TypeScript. Assigning a number to a string variable or calling an undefined function passes here; use tsc or your editor for real type checking.
Can I minify TypeScript here?
Not directly. Minifiers work on JavaScript, so the TypeScript has to be compiled first with tsc, esbuild or similar. Take the compiled output to the JavaScript minifier, which is linked from this page.
Does the formatter change my types or imports?
No. Prettier only changes layout such as indentation, quote style, line breaks and trailing commas. It does not reorder imports, remove unused code or touch type logic.