Zum Inhalt springen
Numio

JSON Schema in TypeScript umwandeln — Numio

Kompiliert ein JSON Schema mit json-schema-to-typescript in TypeScript-Interfaces. Properties, die nicht in "required" stehen, werden optional, und Objekte erhalten eine Index-Signatur, sofern additionalProperties nicht false ist.

Deine API veröffentlicht JSON-Schema-Dateien, und du willst passende Interfaces für den Client-Code, der sie verarbeitet.

JSON Schema

TypeScript

Wann sie hilft

  • Deine API veröffentlicht JSON-Schema-Dateien, und du willst passende Interfaces für den Client-Code, der sie verarbeitet.
  • Du hast Konfigurationsdateien, die per Schema validiert werden, und willst Typprüfung dort, wo die Konfiguration geladen wird.

Anwendung

  1. Füge ein JSON Schema in das Panel JSON Schema ein. Ein "title" legt den Interface-Namen fest; ohne ihn heißt die Wurzel MySchema.
  2. Die Konvertierung läuft beim Tippen im Browser; die Seite hat keine Einstellungen und fügt keinen Banner-Kommentar hinzu.
  3. Kopiere die Interfaces aus dem Panel TypeScript. Die Seite formatiert sie mit Prettier, daher verwenden sie zwei Leerzeichen Einrückung und keine Semikolons.

JSON Schema

{
  "title": "Address",
  "type": "object",
  "properties": {
    "street": { "type": "string", "minLength": 1 },
    "zip": { "type": "string", "pattern": "^[0-9]{5}$" },
    "country": { "enum": ["US", "CA"], "default": "US" },
    "unit": { "type": ["integer", "null"] },
    "lines": { "type": "array", "items": { "type": "string" }, "maxItems": 3 },
    "geo": { "type": "object", "required": ["lat", "lng"],
      "properties": { "lat": { "type": "number" }, "lng": { "type": "number" } } }
  },
  "required": ["street", "zip"]
}

TypeScript-Interfaces

export interface Address {
  street: string
  zip: string
  country?: "US" | "CA"
  unit?: number | null
  lines?: [] | [string] | [string, string] | [string, string, string]
  geo?: {
    lat: number
    lng: number
    [k: string]: unknown
  }
  [k: string]: unknown
}

Details und Einschränkungen

Objekte ohne "additionalProperties": false erhalten [k: string]: unknown, sodass zusätzliche Schlüssel im Typ erlaubt bleiben.

maxItems bei einem Array wird zu einer Union von Tupeln erweitert, wie bei "lines" im Beispiel.

Lokale $ref-Einträge wie #/definitions/Tag werden zu separaten exportierten Interfaces.

Die Seite formatiert das Ergebnis mit Prettier ohne Semikolons, was auch überflüssige Klammern um Unions wie "US" | "CA" entfernt.

FAQ

Wie werden null-Werte typisiert?

"type": ["integer", "null"] wird zu (number | null). integer und number werden beide zu number.

Wie werde ich [k: string]: unknown los?

Ergänze "additionalProperties": false in jedem Objekt-Schema; dann entfällt die Index-Signatur.

Wie wird das Wurzel-Interface benannt?

Nach dem "title" des Schemas, umgewandelt in PascalCase ("Example Schema" wird zu ExampleSchema). Ohne title lautet der Name MySchema.

Wird das Schema an einen Server gesendet?

Nein. Die compile-Funktion von json-schema-to-typescript läuft auf dieser Seite im Browser.

Spezifikationen und Referenzen