TypeScript formatieren

Was ein TypeScript Formatter macht

TypeScript ergänzt JavaScript um Typen: Interfaces, Generics, Enums, Union Types und Annotationen an jedem Parameter. Diese zusätzliche Syntax macht das Layout umso wichtiger. Eine lange Funktionssignatur mit generischen Parametern und Rückgabetyp ist in einer Zeile schwer zu lesen, und Objekttypen, die verschiedene Leute geschrieben haben, driften im Stil auseinander.

Dieser Formatter führt Prettier 3 mit dem TypeScript-Parser in deinem Browser aus. Er liest deinen Code und gibt ihn mit einem einheitlichen Layout wieder aus. Der Code selbst, jeder Typ eingeschlossen, bleibt genau gleich.

So nutzt du ihn

1. Füge TypeScript in das linke Feld ein. Es wird sofort beim Einfügen formatiert.
2. Oder klicke auf Datei öffnen, um eine .ts-Datei zu laden, oder auf Beispiel, um ein Beispiel auszuprobieren.
3. Wähl deine Optionen: Einrückung (2 Leerzeichen, 4 Leerzeichen oder Tabs), Zeilenbreite (80 bis 160), Trailing Commas (Alle, ES5 oder Keine), Einfache Anführungszeichen und Semikolons.
4. Klicke auf Formatieren oder drück Strg+Enter.
5. Klicke auf Kopieren oder auf Herunterladen, um eine .ts-Datei zu speichern.

Beim ersten Formatieren wird der TypeScript-Parser geladen. Danach aktualisiert sich die Ausgabe beim Tippen.

Vorher und nachher

Komprimierte Eingabe:

interface User{id:number;name:string;email?:string}export function greet(user:User,greeting:string='Hello'):string{return `${greeting}, ${user.name}`}const users:User[]=[{id:1,name:'Ada'},{id:2,name:'Linus'}]

Nach Formatieren mit den Standardwerten:

interface User {
  id: number;
  name: string;
  email?: string;
}
export function greet(user: User, greeting: string = "Hello"): string {
  return `${greeting}, ${user.name}`;
}
const users: User[] = [
  { id: 1, name: "Ada" },
  { id: 2, name: "Linus" },
];

Jedes Interface-Mitglied bekommt eine eigene Zeile, Annotationen bekommen ein Leerzeichen nach dem Doppelpunkt, und das Array aus Objekten wird aufgeteilt, weil es in einer Zeile über 80 Zeichen käme. Kurze Objekte bleiben im Array in einer Zeile.

Generics und Typaliase werden genauso behandelt:

type ApiResponse<T> = { data: T; error?: string };
async function get<T>(url: string): Promise<ApiResponse<T>> {
  const r = await fetch(url);
  return r.json() as Promise<ApiResponse<T>>;
}

Klassen mit Zugriffsmodifikatoren und dem Operator ??:

class Cart {
  private items: Map<string, number> = new Map();
  add(id: string, qty = 1): void {
    this.items.set(id, (this.items.get(id) ?? 0) + qty);
  }
}

Mit der Einrückung auf Tabs sieht ein Enum so aus (jedes Mitglied beginnt mit einem Tab):

enum Role {
	Admin = "admin",
	Editor = "editor",
}

Syntaxfehler

Wenn der Code nicht geparst werden kann, bekommst du die Meldung des TypeScript-Parsers mit einer Position. Der Meldungstext bleibt Englisch, nur Zeile und Spalte davor sind deutsch. Zwei Beispiele:

• let count: number = ; ergibt Zeile 1, Spalte 21: Expression expected.
• function add(a: number, b: number { ergibt Zeile 1, Spalte 35: ',' expected. und zeigt auf die Stelle, an der die schließende Klammer fehlt.

Klicke auf In der Eingabe zeigen, um den Cursor auf das Problem zu setzen.

Denk daran: Sauber formatiert heißt nicht sauber kompiliert. Diese Zeile lässt sich problemlos formatieren, obwohl sie ein Typfehler ist:

let count: number = "five";

Das erkennt nur der TypeScript-Compiler.

Tipps

• Wenn dein Projekt eine .prettierrc hat, stell hier dieselben Optionen ein, damit das Ergebnis zu deinem Repository passt.
• Die Einstellung Trailing Commas auf Alle setzt Kommas auch nach dem letzten Typparameter und Funktionsparameter, wenn diese umbrochen werden. Wähl ES5, wenn du Kommas nur in Arrays und Objekten willst.
• Bei .tsx-Dateien mit React kommt der TypeScript-Parser auch mit JSX zurecht.
• Du formatierst ein GraphQL-Schema, das neben deinen Typen liegt? Nimm den GraphQL Formatter. Bei JSON-Konfigurationen wie tsconfig.json beachte, dass sie Kommentare erlauben, striktes JSON aber nicht. Der JSON Formatter markiert sie deshalb.

Andere Wege, TypeScript zu formatieren

• VS Code bringt einen TypeScript-Formatter mit. Führe Dokument formatieren aus (Umschalt+Alt+F unter Windows, Umschalt+Option+F unter macOS). Für ein Ergebnis, das zu dieser Seite passt, installierst du die Prettier-Erweiterung und wählst sie als Standard-Formatter.
• Kommandozeile: npx prettier --write "src/**/*.ts" formatiert einen ganzen Ordner.
• Pre-Commit-Hooks: Tools wie lint-staged können Prettier vor jedem Commit auf geänderte Dateien anwenden, damit Formatierungsfragen nie im Code-Review landen.

Für reine JavaScript-Dateien bietet der JavaScript Formatter dieselben Optionen mit einem kleineren Download.