JSON zu TypeScript: Schluss mit handgeschriebenen Interfaces

2024-08-04

Handgeschriebene Interfaces driften schnell von echten API-Antworten ab. TypeScript-Typen aus Beispiel-JSON zu generieren ist Standard, wenn man Regeln und Grenzen kennt.

Warum Typen generieren?

Erkennt Tippfehler und Null-Zugriffe bereits zur Compile-Zeit und hilft, wenn OpenAPI fehlt oder veraltet ist.

Beispiel für manuelles Mapping

JSON
{ "id": 1, "name": "Alice", "email": null }
TypeScript
interface User {
  id: number;
  name: string;
  email: string | null;
}

Verschachtelte Arrays und Union-Typen

Leere Arrays brauchen einen manuell gesetzten Elementtyp, heterogene Arrays werden zu Union-Typen.

Optional vs. null

Fehlende Schlüssel (email?) sind nicht dasselbe wie null-Werte (email: string | null). Richte es nach der Backend-Semantik aus.

Tools

quicktype CLI, json-schema-to-typescript und für Einzelfälle ein Online-json2ts.

# npx quicktype sample.json -o types.ts --lang typescript

Best Practices

Generierte Dateien neu erzeugen statt manuell zu editieren, mehrere Samples verwenden und Breaking API Changes über tsc sichtbar machen.