Zo gebruik je deze tool
- Plak JSON in het invoerveld, open een .json-bestand of probeer het voorbeeld.
- Stel de naam van het roottype in, bijvoorbeeld Order of ApiResponse.
- Kies interface- of typedeclaraties en of je export en readonly wilt toevoegen.
- Kopieer de gegenereerde TypeScript of download deze als types.ts.
Hoe het werkt
De generator loopt het hele JSON-document door en registreert per plek welk soort waarde er voorkomt. Elk JSON-object wordt een eigen benoemde declaratie. De naam komt van de eigenschapsnaam in PascalCase, dus “shipping_address” wordt ShippingAddress. Array-items worden vernoemd naar het enkelvoud van de sleutel: “items” geeft Item, “categories” geeft Category, en sleutels die niet op een meervoud lijken, krijgen het achtervoegsel “Item”.
Alle objecten binnen één array worden samengevoegd tot één interface. Als een sleutel maar in een deel ervan voorkomt, wordt deze optioneel gemarkeerd met “?”. Als een waarde op verschillende plekken verschillende typen heeft, wordt het type een union zoals string | number. null blijft als eigen type behouden, dus een veld dat soms null is, wordt string | null. Een lege array wordt unknown[], omdat er niets uit af te leiden valt. Twee objecten met exact dezelfde eigenschappen en typen delen één interface in plaats van duplicaten te produceren. Sleutels die geen geldige identifiers zijn, zoals “first-name”, worden tussen aanhalingstekens geplaatst.
Het resultaat beschrijft alleen het voorbeeld dat je plakt. Een veld dat in werkelijkheid optioneel is of null kan zijn, wordt verplicht en niet-null als jouw voorbeeld dat niet laat zien, en datums komen binnen als gewone strings. Controleer de typen aan de hand van je API-documentatie voordat je erop vertrouwt.
Voorbeelden
API-respons typen
Plak een bestelling uit je shop-API met als rootnaam Order. Je krijgt de interfaces Order, Customer, Item en Shipping, met note?: string op Item omdat slechts een van de twee items een notitie heeft.
Alleen-lezen configuratie
Plak een config.json, vink “Maak eigenschappen alleen-lezen” aan en plak het resultaat in config.d.ts, zodat onbedoelde schrijfacties naar de config door de compiler worden opgemerkt.
Array op het hoogste niveau
Een lijst-endpoint retourneert [{…}, {…}]. Met de rootnaam Product begint de uitvoer met “export type Product = ProductItem[];”, gevolgd door de interface ProductItem.
Veelgestelde vragen
Waarom is een veld optioneel in de uitvoer?
Omdat minimaal één object in dezelfde array die sleutel niet heeft. Als elk object de sleutel heeft, is het veld verplicht. Plak meerdere records voor nauwkeurigere optionele velden.
Waarom heeft een datum het type string?
JSON heeft geen datumtype, dus datums komen als strings binnen. De generator raadt geen formaten. Pas het type zelf aan als jouw code ze naar Date-objecten converteert.
Wat is het verschil tussen interface en type?
Voor objectstructuren werken ze vrijwel hetzelfde. Interfaces kunnen door latere declaraties worden uitgebreid en samengevoegd; type-aliassen kunnen niet opnieuw worden geopend. Kies de stijl die je codebase al gebruikt.
Kan het runtimevalidatie genereren, zoals Zod-schema's?
Nee. Het genereert alleen TypeScript-declaraties; die worden tijdens het compileren gecontroleerd en valideren data niet tijdens runtime.
Privacy
Je JSON wordt alleen in je browser geanalyseerd. Er wordt niets geüpload, opgeslagen of opgenomen in analytics.