DT Dev Tools

JSON naar TypeScript

Leid lokaal TypeScript-interfaces af uit een JSON-voorbeeld. Deze gratis generator verwerkt geneste objecten, arrays en unies zonder je gegevens te uploaden.

🔒 Draait volledig in uw browser — niets wordt geüpload

Advertisement

Wat JSON naar TypeScript doet

JSON naar TypeScript leest een JSON-voorbeeld en leidt er sterk getypeerde TypeScript-interfaces uit af die de structuur beschrijven. De tool loopt recursief door de waarde: objecten worden benoemde interfaces, primitieve waarden worden de bijbehorende typen string, number, boolean of null, en arrays worden elementtypen tussen blokhaken. Als een array elementen van verschillende typen bevat, voegt de generator ze samen tot een unie, zodat het resultaat nog steeds past bij de oorspronkelijke data. Dat is handig bij het gebruiken van een API zonder gepubliceerde typen, bij het toevoegen van typeveiligheid aan een verouderde payload of bij het omzetten van een snelle testset naar een herbruikbaar model.

Arrays van objecten worden zorgvuldig behandeld. In plaats van alleen het eerste element te typeren, voegt de tool alle objecten in de array samen tot één interface en verzamelt de unie van de sleutels. Sleutels die in sommige elementen ontbreken, worden met een vraagteken achter de naam als optioneel gemarkeerd. Dat weerspiegelt hoe echte antwoorden velden alleen bevatten wanneer ze zijn ingevuld. Geneste objecten worden verheven tot eigen benoemde interfaces, afgeleid van de eigenschapsnaam, zodat de uitvoer leest als met de hand geschreven modellen in plaats van één diep ingebed type.

Privé werken in de browser

Alle parsing en type-inferentie gebeurt in je browser met JavaScript aan de clientzijde. De tool uploadt je JSON, API-antwoorden, identificatoren, tokens of op klantdata lijkende voorbeelden niet naar een server en vereist geen account. Dat uitsluitend lokale model is belangrijk, omdat de data die in een typegenerator wordt geplakt vaak een echt productieantwoord is dat tijdens het debuggen is vastgelegd. Door het werk op je eigen computer te houden verklein je risico's en is het resultaat direct beschikbaar, omdat er geen netwerkverkeer zit tussen plakken en uitvoer.

De interface houdt de JSON-invoer, de rootnaam en de gegenereerde interfaces bij elkaar, zodat je de inferentie kunt controleren voordat je kopieert. Resultaten moeten toch worden nagekeken voordat je ze vastlegt: één voorbeeld kan niet elk optioneel veld, elke nullable waarde of enum onthullen die de echte API kan teruggeven. Verbreed de typen dus waar je domeinkennis aangeeft dat een veld kan ontbreken of meer vormen kan aannemen dan het voorbeeld toont.

Praktische tips

Geef het meest complete voorbeeld dat je hebt, bij voorkeur met ingevulde optionele velden en een array met meer dan één element, zodat de samenvoeglogica unies en optionaliteit kan herkennen. Hernoem de root-interface voor het genereren zodat die bij je domeinmodel past. Overweeg na het kopiëren te losse afgeleide typen aan te scherpen: vervang brede string-velden door literal-unies voor bekende enums, markeer identificatoren als branded types als je codebase die gebruikt en controleer of een veld dat als null is getypeerd in plaats daarvan een nullable unie moet zijn. Inferentie in de browser is uitstekend voor een snelle eerste versie, maar de definitieve typen moeten het contract weergeven waarvan je applicatie echt afhankelijk is.

Hoe te gebruiken

  1. Plak JSONVoeg een representatief JSON-object of -array als voorbeeld toe.
  2. Geef de root een naamKies een naam voor de root-interface en genereer daarna de interfaces.
  3. Kopieer de interfacesControleer de afgeleide TypeScript en kopieer of download die.

Veelgestelde vragen

Kan het omgaan met geneste objecten en arrays?
Ja. De inferentie gaat recursief door geneste objecten en arrays en benoemt onderliggende interfaces naar hun eigenschapssleutels.
Hoe worden arrays met gemengde items verwerkt?
Elementtypen worden samengevoegd tot een unie, en bij arrays van objecten worden alle sleutels samengevoegd, zodat optionele velden met een vraagteken worden gemarkeerd.
Wordt mijn JSON geüpload?
Nee. De inferentie draait volledig in je browser met JavaScript aan de clientzijde.
Advertisement