TypeScript Formatter

The TypeScript Formatter beautifies TypeScript (.ts) and TSX (.tsx) code while correctly handling type-specific syntax: type annotations (: string), interfaces, type aliases, generics (<T>), union and intersection types (A | B, A & B), enums, decorators (@Component), namespaces, const assertions, and satisfies operator. Output follows Prettier conventions which have become the de facto TypeScript style (used by most modern TS projects including Next.js, NestJS, Vue 3, Angular). Complements our JavaScript Formatter — TypeScript is a superset of JavaScript, so most rules overlap.

TypeScript has been adopted by the majority of new JavaScript projects since ~2020 — adding static typing to catch bugs at compile time. The additional type syntax makes formatting slightly more complex than plain JS, but Prettier handles it well. This formatter respects both JavaScript rules and TypeScript-specific patterns — complex generic constraints on multiple lines, long union types broken up, decorator placement, class field types.

TypeScript adds type annotations and several type-system features on top of JavaScript.

Type annotations:

``typescript
let name: string = "Alice";
function add(a: number, b: number): number { return a + b; }
``

Formatter preserves annotations, spacing consistent: name: string (space after colon).

Interfaces:

``typescript
interface User {
id: number;
name: string;
email?: string; // optional
readonly created: Date;
}
``

Formatter formats members like object literals — one per line, consistent spacing.

Type aliases:

``typescript
type UserId = number;
type Coordinates = { x: number; y: number };
type Status = "active" | "inactive" | "pending";
``

Union and intersection types:

Long union types break onto multiple lines:

``typescript
type Result =
| { status: "success"; data: User }
| { status: "error"; message: string }
| { status: "pending" };
``

Generics:

```typescript
function identity<T>(value: T): T { return value; }

interface Repository<T, K extends keyof T = "id"> {
findById(id: K): T | null;
}
```

Constraints (extends) formatted consistently.

Enums:

``typescript
enum Status {
Active = "ACTIVE",
Inactive = "INACTIVE",
Pending = "PENDING",
}
``

Or const enums:

``typescript
const enum Direction {
Up,
Down,
Left,
Right,
}
``

Decorators:

``typescript
@Component({
selector: "app-home",
template: <h1>Home</h1>,
})
class HomeComponent {
@Input() title: string;
@Output() changed = new EventEmitter<string>();
}
``

TSX (React TypeScript):

Same as JSX with type annotations on props:

```typescript
interface ButtonProps {
label: string;
onClick: () => void;
variant?: "primary" | "secondary";
}

const Button: React.FC<ButtonProps> = ({ label, onClick, variant = "primary" }) => (
<button className={btn btn-${variant}} onClick={onClick}>
{label}
</button>
);
```

Modern TS features (2022+):

- Satisfies operator: const config = { ... } satisfies Config;
- Const type parameters: function create<const T>(value: T): T.
- Using declarations: using resource = getResource(); (explicit resource management).
- Template literal types: type Color = \#\${string}\;.
- Conditional types: type IsArray<T> = T extends unknown[] ? true : false;.
- Mapped types: type Partial<T> = { [K in keyof T]?: T[K] };.

All handled correctly by Prettier-based formatting.

Prettier TypeScript defaults (same as JS):

- 2-space indent
- Double quotes
- Semicolons required
- Trailing commas (all, ES2017+)
- 80-character line width

Prettier disagrees with some ESLint rules:

Conflicts with ESLint no-extra-parens, etc. Use eslint-config-prettier to disable formatting rules in ESLint. Prettier formats, ESLint checks semantics.

TypeScript Formatter vs JavaScript Formatter: Same Prettier base. TS formatter adds type syntax handling. For .ts files, use TS. For .js, either works (TS handles both).

Prettier vs tsfmt (legacy): tsfmt is an older TypeScript formatter. Prettier is the modern standard used by virtually all modern TS projects.

Formatter vs TypeScript compiler: tsc compiles TS to JS. This formatter formats TS as TS. Different purposes.

TypeScript vs JavaScript: TS is superset of JS. All JS is valid TS (with allowJs: true). This formatter handles both.

This tool vs editor integration: VS Code has Prettier built-in. Format on save is ideal for daily work. This tool for ad-hoc formatting without VS Code open.

Formatter vs Linter: Formatter fixes style. Linter (ESLint with @typescript-eslint) fixes semantic issues. Both needed.