TypeScript Formatter

Re-indented 3 line(s) of TypeScript at 2-space depth.

How it works

• Tokenised the source so strings, template literals, comments and regular expressions are recognised.
• Tracked brace depth and placed each statement on its own line.
• Preserved the author's line breaks so automatic semicolon insertion cannot change.
• Left type annotations, generics and template-literal contents untouched.

• The formatter changes whitespace only; identifiers, types and literals are preserved.
• Existing line breaks are kept because moving a token across a newline can change automatic semicolon insertion.
• Output is 3 line(s); formatting it again changes nothing.

Methodology

1. Tokenise with a quote/regex/comment-aware scanner so literal content cannot be mistaken for punctuation.
2. Track brace depth outside parentheses and brackets and emit each statement on its own line.
3. Preserve the original newline positions so automatic semicolon insertion semantics are unchanged.

Usage

1. Paste or type a TypeScript or JavaScript file.
2. Choose a 2- or 4-space indent.
3. Run the formatter and copy the indented result.

Examples

These are examples, not current values: they use fixed inputs, while the interactive tool computes live results in your browser.

Function with a type annotation

{
  "text": "function add(a: number, b: number): number {\nreturn a + b\n}",
  "indentSize": 2
}

Interface indented

{
  "text": "interface User {\nname: string\nage: number\n}",
  "indentSize": 2
}

Template literal preserved

{
  "text": "const s = `a\n  b\n  ${x}`",
  "indentSize": 4
}

Limitations

Automatic semicolon insertion

JavaScript and TypeScript insert a semicolon at a line break in specific positions. A formatter that moves statements across newlines can silently change a program's meaning, which is why this tool preserves existing line breaks.

Combined with brace-based indentation, the result is readable without risking the statement semantics.