JSON naar TypeScript-interface + Zod-schema converter | We.Inc
Plak JSON en krijg in één keer TypeScript-interfaces en een Zod-schema. Arrays worden samengevoegd, zodat ontbrekende velden optioneel worden. Niets verlaat uw browser.
Plak een willekeurig JSON-voorbeeld en deze converter schrijft TypeScript-interfaces voor controles tijdens het compileren en een Zod-schema om data tijdens runtime te controleren. Geneste objecten krijgen hun eigen benoemde types, arrays van objecten worden samengevoegd zodat velden die in sommige items ontbreken optioneel worden, en de conversie gebeurt lokaal, dus privédata blijft op uw computer.
Hoe JSON-waarden op types worden afgebeeld
JSON-waarde
TypeScript
Zod
"text"
z.string()
42 of 4.2
z.number()
z.boolean()
z.null()
number[]
z.array(z.number())
interface met a: number
z.object({ a: z.number() })
Key ontbreekt in sommige array-items
key?: type
.optional()
Types zijn maar zo goed als het voorbeeld, dus plak een response die elk veld toont dat u verwacht, liefst met meerdere array-items. Hernoem het root-type, wissel tussen interface en type alias en kopieer een van beide uitvoeren.
Types of een schema: wat hebt u nodig?
TypeScript-types verdwijnen wanneer uw code compileert. Ze helpen uw editor en vangen fouten in uw eigen code af, maar ze kunnen u niet vertellen dat een API een string stuurde waar u een getal verwachtte.
Een Zod-schema is echte code die draait. parse aanroepen op binnenkomende data gooit een fout die het foute veld noemt, en z.infer geeft u het TypeScript-type uit hetzelfde schema, zodat de twee nooit uit elkaar lopen. Voor data van buiten uw app is het schema de veiligere keuze.
Lezen wat de converter heeft afgeleid
Een veld dat in uw voorbeeld null was, krijgt het type null, omdat het voorbeeld geen andere aanwijzing geeft. Wijzig het in string | null (of .nullable() in Zod) zodra u weet wat het bevat, of vink de optie aan die null-velden optioneel maakt.
Een lege array wordt om dezelfde reden unknown[]. Datums komen in JSON binnen als strings, dus ze blijven strings; in Zod kunt u er een aanscherpen tot z.string().datetime() of iets vergelijkbaars zodra u het formaat kent.
Typenamen komen van de keys: een array staff levert Staff op, een object address levert Address op. Als twee keys dezelfde naam zouden geven, wordt er een nummer toegevoegd.
Plak JSON in het vak, of houd het voorbeeld om te zien hoe het werkt.
Stel de naam van het root-type in. Elk genest object krijgt een naam op basis van zijn key.
Kies interface of type alias, en of properties readonly moeten zijn.
Kopieer de TypeScript, het Zod-schema of allebei. Fouten in de JSON worden getoond met de melding van de parser.
Plak twee of drie items in elke array, zodat optionele velden worden herkend.
Verwijder gevoelige waarden voordat u gegenereerde types deelt; de tool zelf uploadt nooit iets.
Bewaar schema's naast de code die de data ophaalt en parse op die grens, niet diep in componenten.
Gebruik safeParse in plaats van parse als u een vriendelijke melding wilt tonen in plaats van een fout te gooien.
Veelgestelde vragen
Moet ik een interface of een type alias gebruiken?
Beide beschrijven hier objectvormen even goed. Interfaces met dezelfde naam worden samengevoegd, wat helpt bij het uitbreiden van types uit libraries; type aliases kunnen niet samenvoegen maar wel unions benoemen. Kies één stijl voor de codebase en houd u daaraan.
Hoe krijg ik het TypeScript-type uit een Zod-schema?
Gebruik type User = z.infer<typeof UserSchema>. De gegenereerde Zod-uitvoer bevat deze regel al onder elk schema, dus u hoeft geen aparte interfaces bij te houden.
Waarom heeft een veld het type null?
Uw voorbeeld had daar null, dus er viel niets anders af te leiden. Vervang het door het echte type gecombineerd met null, bijvoorbeeld string | null, of z.string().nullable() in het schema.
Wordt mijn JSON naar een server gestuurd?
Nee. Parsen en genereren gebeuren in JavaScript op deze pagina. U kunt de pagina laden, offline gaan en hij werkt nog steeds.
De uitvoer gebruiken
Een response valideren met het gegenereerde schema
safeParse geeft succes of een lijst met problemen terug in plaats van een fout te gooien, wat past bij fetch-code die een foutstatus moet tonen.
Dezelfde vorm als gewone interfaces
Handig om props of functieargumenten te typeren als de data al vertrouwd is.
Plak JSON, krijg types
Plak een voorbeeldresponse. De converter schrijft TypeScript-interfaces en een bijpassend Zod-schema naast elkaar, en voegt elk item van een array samen zodat velden die in sommige items ontbreken optioneel worden.