Formatters
TypeScript Formatter
Prettier for TypeScript — generics, decorators and annotations formatted the way your repo expects.
In short
Format TypeScript online with prettier: generics, decorators, type annotations and TSX handled correctly. Exact syntax-error positions. Free.
By NaveenKumar T · Updated
Learn: Pretty Print JSON in JavaScript: stringify and Beyond
- Industry-standard formatting
- Exact error line & column
- 2/3/4-space or tab indent
Runs entirely in your browser — nothing you paste or open here is uploaded, logged, or stored.How we handle data →
Example
TypeScript Formatter: input and output
A generic form validator: a `Rule<T>` type, a rules table checked with `satisfies`, and a `validate` function whose mapped-type parameter runs well past 80 columns.
type Rule<T>={test:(v:T)=>boolean;message:string}
const rules={email:[{test:(v:string)=>/^[^@]+@[^@]+$/.test(v),message:'Enter a valid email'}],age:[{test:(v:number)=>v>=18,message:"Must be 18+"}]} satisfies Record<string,Rule<any>[]>
export function validate<T extends Record<string,unknown>>(values:T,schema:{[K in keyof T]?:Rule<T[K]>[]}):Partial<Record<keyof T,string>>{const errors:Partial<Record<keyof T,string>>={};for(const key in schema){const failed=schema[key]?.find(r=>!r.test(values[key]));if(failed)errors[key]=failed.message}return errors}type Rule<T> = { test: (v: T) => boolean; message: string };
const rules = {
email: [
{
test: (v: string) => /^[^@]+@[^@]+$/.test(v),
message: "Enter a valid email",
},
],
age: [{ test: (v: number) => v >= 18, message: "Must be 18+" }],
} satisfies Record<string, Rule<any>[]>;
export function validate<T extends Record<string, unknown>>(
values: T,
schema: { [K in keyof T]?: Rule<T[K]>[] },
): Partial<Record<keyof T, string>> {
const errors: Partial<Record<keyof T, string>> = {};
for (const key in schema) {
const failed = schema[key]?.find((r) => !r.test(values[key]));
if (failed) errors[key] = failed.message;
}
return errors;
}
The `validate` parameters are split one per line with a trailing comma after the mapped-type `schema`, while `satisfies Record<…>` stays on the closing line of the object it qualifies.
Learn more
Formatting TypeScript, properly
TypeScript formatting needs a parser that truly speaks the language: conditional types, generics with defaults, decorators, satisfies expressions. This page uses prettier's TypeScript parser — the exact engine in most TS repos' pre-commit hooks — so long union types wrap legibly and complex generics stay readable.
Beyond cleaning pasted snippets, it's a quick syntax oracle: TYPE-level code can get gnarly, and the formatter's parse step pinpoints exactly where a generic went wrong — often faster than reading tsc's error chain. (It checks syntax, not types — your editor still owns type errors.)
Help
Frequently asked questions
Everything you need to know about the TypeScript Formatter.
01How do I format TypeScript code here?
Paste your TypeScript (or load a file/URL), choose an indentation width, and press Format. Prettier's TypeScript parser reprints generics, decorators and type annotations in canonical style, reporting the exact position of anything it can't parse — it checks syntax only, not types.
02Does the formatter type-check my TypeScript?
No — formatting parses syntax only, which is what makes it instant. A structurally valid file with type errors formats fine. Think of it as the style-and-syntax pass; tsc and your editor remain the type authority.
03How are long generics, union types and `satisfies` printed?
A signature wider than 80 columns breaks its parameters one per line and ends the last one with a trailing comma (legal in TypeScript, and prettier 3's default); type-parameter lists break the same way. A union that no longer fits moves each member to its own line prefixed with `|`, including a leading `|` on the first. `satisfies` and `as` stay inline after the expression they qualify, object-type members are separated with semicolons, and `?.` and `!` assertions are left exactly where they were.
Keep working