TypeScript Formatieren

Der formatierte Code

Wenn du den Formatierer auf das minifizierte TypeScript oben anwendest, erhältst du:

type ApiResponse<T> = {
  data: T;
  status: number;
  message: string;
  meta: {
    page: number;
    total: number;
    hasNext: boolean;
  };
};

interface User {
  id: number;
  name: string;
  email: string;
  role: "admin" | "user" | "guest";
  preferences: {
    theme: "light" | "dark";
    language: string;
  };
}

async function fetchUsers(
  page: number = 1,
): Promise<ApiResponse<User[]>> {
  const response = await fetch(`/api/users?page=${page}`);
  if (!response.ok) {
    throw new Error(`HTTP ${response.status}`);
  }
  return response.json();
}

function filterByRole<T extends User>(
  users: T[],
  role: T["role"],
): T[] {
  return users.filter((u) => u.role === role);
}

export type { ApiResponse, User };
export { fetchUsers, filterByRole };

Jeder Typ erhält eine eigene Deklaration. Interfaces haben eine Eigenschaft pro Zeile. Generische Typparameter werden umbrochen, wenn sie die Druckbreite überschreiten. Union-Typ-Mitglieder werden zur besseren Lesbarkeit vertikal ausgerichtet.

Warum TypeScript-Formatierung wichtig ist

TypeScript-Code ist dichter als JavaScript, weil Typannotationen hinzukommen. Unformatiertes TypeScript mit verschachtelten Generics, Union Types und Mapped Types wird schneller unlesbar als vergleichbares JavaScript. Formatierung macht mehrere Dinge einfacher:

Typ-Review. Wenn du eine Funktionssignatur prüfst, musst du jeden Parameter mit seinem Typ in einer eigenen Zeile sehen. Eine Wand aus Typannotationen in einer einzigen Zeile macht es unmöglich, einzelne Typen zu prüfen, ohne den String manuell zu parsen.

Refactoring. Wenn du einen Typ umbenennst oder eine generische Bedingung änderst, macht formatierter Code die Änderung im Diff sichtbar. Im minifizierten TypeScript erzeugt dieselbe Änderung einen Diff, der sich über die gesamte Zeile erstreckt.

Dokumentation. Formatiertes TypeScript dient als Dokumentation. Eine gut formatierte Interface-Definition vermittelt die Struktur einer Datenstruktur klarer als jeder Kommentar.

TypeScript-spezifische Formatierung

Prettier verarbeitet TypeScript-spezifische Konstrukte mit denselben Regeln wie JavaScript-Code:

Typannotationen: Werden umbrochen, wenn sie die Druckbreite überschreiten. Funktionsparametertypen, Rückgabetypen und generische Bedingungen folgen denselben Zeilenumbruchregeln.

Interfaces und Type Aliases: Eine Eigenschaft pro Zeile. Union-Typ-Mitglieder können vertikal ausgerichtet werden, wenn sie kurz genug sind. Discriminated Unions werden so formatiert, dass die Diskriminator-Eigenschaft klar erkennbar ist.

Generics: Typparameter werden umbrochen, wenn sie lang sind. Mehrzeilige Generics rücken jeden Typparameter in eine eigene Zeile ein.

Enums: Mitglieder werden eines pro Zeile formatiert. Const Enums folgen denselben Regeln.

Prettier vs. ESLint für TypeScript

Prettier formatiert Code. ESLint findet Fehler und erzwingt Best Practices. Sie dienen unterschiedlichen Zwecken und ergänzen sich. Ein gängiges Setup:

1. Verwende Prettier für die gesamte Formatierung (Semikolons, Anführungszeichen, Einrückung, Zeilenumbrüche)
2. Verwende @typescript-eslint für typbewusstes Linting (no-unused-vars, no-explicit-any, prefer-optional-chain)
3. Deaktiviere ESLint-Regeln, die mit Prettier kollidieren (indent, semi, quotes)
4. Führe zuerst Prettier aus, dann ESLint, damit ESLint Probleme beheben kann, die Prettier nicht behandelt

Diese Trennung bedeutet, dass du einheitliche Formatierung von Prettier und Code-Qualitätsprüfungen von ESLint erhältst, ohne dass sich die Werkzeuge gegenseitig in die Quere kommen.