YamlBox

Leitartikel · 6 Min. Lektüre

Generieren Sie TypeScript Typen aus JSON, die die Wahrheit

Der Schritt von JSON zu TypeScript beginnt normalerweise mit dem Kopieren einer API-Antwort in einen Editor und dem handschriftlichen Schreiben einer Benutzeroberfläche – eine kleine Aufgabe, die ein großes Risiko birgt: Die von Ihnen geschriebenen Typen beschreiben die eine Antwort, die Sie gesehen haben, nicht die Antworten, die Ihre Benutzer auslösen werden.

Aktualisiert

JSON bis TypeScript: Beginnen Sie mit einer repräsentativen Nutzlast, nicht mit einer glücklichen

Ein Generator kann nur auf das schließen, was Ihre Probe zeigt. Rufen Sie eine Antwort ab, die die unangenehmen Fälle enthält: einen Datensatz mit dem optionalen Feld und einen ohne, eine Null, ein leeres Array, eine Dezimalzahl. Eine gute Probe schlägt fünf saubere.

Optionale Felder stammen aus Arrays

Bei einem einzelnen Objekt sieht jeder Schlüssel erforderlich aus. Bei einem Array von Objekten kann ein Generator Elemente vergleichen: Ein bei einigen Elementen fehlender Schlüssel ist optional (Schlüssel?: Zeichenfolge), und ein überall vorhandener Schlüssel ist erforderlich. Aus diesem Grund führt das Einfügen einer Liste von Datensätzen zu deutlich besseren Typen als das Einfügen eines einzelnen Datensatzes.

Ehrlich gesagt ist das Modell null

                // One sample with "deleted_at": null and one with a date
interface User {
  id: number;
  deleted_at: string | null;   // not string, not optional
}
              

null und undefiniert sind verschiedene Dinge. Ein Feld, das NULL-Werte zulässt, ist mit einem Nullwert vorhanden. ein optionales Feld kann ganz fehlen. Generatoren, die die beiden kollabieren, erzeugen Schnittstellen, die eine Typprüfung durchführen, während sie falsch sind – die teuerste Art von Falsch, weil der Compiler Sie nicht mehr warnt.

Gewerkschaften schlagen alle

Wenn ein Feld in einem Datensatz eine Zeichenfolge und in einem anderen eine Zahl ist – es gibt chaotische APIs –, ist der ehrliche Typ string | Nummer. Der Rückgriff auf irgendein oder unbekannt bringt den Compiler zum Schweigen und verschiebt den Fehler in die Produktion. Ein Generator, der die Gewerkschaft meldet, dokumentiert zumindest die Realität, und Sie können dann das API-Team nach dem Grund fragen.

Typen sind zur Kompilierungszeit verfügbar; zur Laufzeit validieren

  • TypeScript verschwindet zur Laufzeit. Nichts hindert eine fehlerhafte Nutzlast daran, in einer Form anzukommen, die Ihre Schnittstelle verbietet.
  • Verwenden Sie generierte Typen, um zu beschreiben, was Sie erwarten, und einen Laufzeitvalidator (Zod, Valibot oder ein JSON-Schema mit AJV) an der Grenze, an der Daten in Ihre App gelangen.
  • Durch die Generierung eines JSON-Schemas aus demselben Beispiel erhalten Sie die Laufzeithälfte – das Schema validiert, das Schnittstellendokument.

Behalten Sie die Regenerierung der Typen bei, nicht die Neueingabe

Von Hand geschriebene Typen stammen aus dem API. Behandeln Sie den Generator als einen Schritt in Ihrem Arbeitsablauf: Fügen Sie eine neue Antwort ein, generieren Sie sie neu, fügen Sie sie in Ihre Typendatei ein und lassen Sie sich vom Compiler jede Stelle anzeigen, an der sich API geändert hat. Es ist der günstigste API-Drift-Detektor, den es gibt – und er kostet 30 Sekunden.

Versuchen Sie es mit dem JSON bis TypeScript-Generator – Schnittstellen- oder Typausgabe, optionale Schlüssel erkannt, Gewerkschaften beibehalten.