acento.io
Dev-tool

JSON naar TypeScript

Genereer TypeScript interfaces uit elke JSON-structuur — volledig in je browser, zonder uploads.

Door Carlos Suárez , Systeemingenieur
Laatst bijgewerkt:

Wat deze Json To Typescript doet

Deze tool converteert een JSON-object of -array direct naar TypeScript interfaces, inclusief recursieve type-inferentie en automatische detectie van optionele velden. 100% client-side — jouw gegevens verlaten nooit je browser. Geen uploads, geen tracking, geen serverlogs. De meeste gratis json2ts-converters markeren elk veld als verplicht en laten je de opruiming handmatig doen. Deze tool vergelijkt alle elementen in een array en markeert velden als optioneel (?) zodra ze niet in elk element voorkomen. Zo krijg je een typescript json type dat direct bruikbaar is in je project — zonder nabewerking. Of je nu werkt met een REST-API-respons, een configuratiebestand of een package.json-structuur: plak de JSON, geef de roottype een naam en kopieer de gegenereerde .ts-definities. De nederlandstalige versie van de tool werkt identiek aan de andere taalpagina's, maar alle labels, foutteksten en help-informatie zijn in het Nederlands.

Functies

  • Recursieve type-inferentie. Geneste objecten worden automatisch omgezet naar aparte interfaces, zodat je altijd een volledig getypeerde structuur krijgt, hoe diep de JSON ook is.
  • Optionele-veld detectie. De tool vergelijkt alle objecten in een array en voegt ? toe aan velden die niet in elk element aanwezig zijn — iets wat de meeste json parser typescript-oplossingen overslaan.
  • Configureerbare rootnaam. Geef je root-interface een betekenisvolle naam. Handig als je meerdere typescript json schema-definities in één codebase beheert.
  • Directe kopieerfunctie. Kopieer de gegenereerde TypeScript-code met één klik naar je klembord en plak hem rechtstreeks in je .ts-bestand of IDE.
  • Privacyveilig. Er wordt geen JSON naar een server gestuurd. Alles draait lokaal in je browser — zo snel als een JSON formatter, maar dan voor types. Bekijk ook de [JSON formatter](/nl/json-formatter/) als je je data eerst wilt opschonen.
  • Geen installatie nodig. Geen npm-pakket, geen tsconfig-aanpassing, geen resolveJsonModule-vlag vereist. Gewoon plakken en genereren.

Zo gebruik je de Json To Typescript

Klaar in drie stappen — geen account, geen configuratie.

  1. Plak je JSON. Kopieer een JSON-object of -array uit je API-respons, logbestand of testfixture en plak het in het invoerveld.
  2. Kies een naam voor het roottype. Geef de root-interface een naam, bijvoorbeeld ApiResponse of UserProfile. De tool genereert child-interfaces automatisch, zoals interface UserProfile { id: number; name: string; address?: Address; }.
  3. Klik op 'Genereren'. De TypeScript interfaces verschijnen direct. Optionele velden (?) worden automatisch gedetecteerd op basis van alle array-elementen.
  4. Kopieer en gebruik. Klik op 'Kopiëren' en plak de types in je .ts-bestand. Wil je ook converteren naar YAML? Gebruik dan de [JSON-YAML-converter](/nl/json-yaml-converter/) voor een extra stap.

Veelvoorkomende toepassingen

  • REST API-integratie typen. Haal een voorbeeld-respons op van een endpoint en genereer direct de bijbehorende TypeScript interfaces. Zo vang je type-fouten al tijdens het compileren in plaats van pas in productie.
  • tsconfig en package.json structureren. Gebruik de tool om de structuur van configuratiebestanden te begrijpen — van een tsconfig json example tot een complexe package json typescript-setup met workspaces.
  • Testfixtures documenteren. Converteer JSON-mockdata naar interfaces zodat je testbestanden en de eigenlijke implementatie altijd synchroon lopen. Handig in monorepos met strenge tsconfig options.
  • Externe dataschema's inlezen. Werk je met een typescript json schema van een derde partij? Plak het in de tool en krijg direct bruikbare interfaces zonder de broncode te hoeven lezen.
  • Snelle prototyping. Bij het snel bouwen van een proof-of-concept wil je geen tijd kwijt zijn aan handmatig typen. Genereer de interfaces in seconden en focus op de logica.

Veelgestelde vragen

Wordt mijn JSON naar een server gestuurd?

Nee. De volledige verwerking vindt plaats in je browser via client-side JavaScript. Er wordt niets geüpload, opgeslagen of gelogd. Je kunt de tool ook offline gebruiken nadat de pagina geladen is.

Wat is het verschil met quicktype.io?

Quicktype stuurt data naar hun servers en biedt een brede taalondersteuning. Deze tool focust uitsluitend op TypeScript, draait volledig lokaal en detecteert optionele velden automatisch — iets wat quicktype in de gratis versie niet altijd doet.

Hoe werkt de detectie van optionele velden?

De tool vergelijkt alle objecten in een array. Als een veld in minstens één element ontbreekt, wordt het gemarkeerd als optioneel met ?. Zo hoef je nooit meer handmatig | undefined toe te voegen aan je json type typescript-definities.

Moet ik `resolveJsonModule` inschakelen in mijn tsconfig?

Alleen als je JSON-bestanden direct importeert in TypeScript met import data from './data.json'. De types die deze tool genereert, zijn losse interface-declaraties en vereisen geen speciale tsconfig-instelling. Controleer de WHATWG URL Living Standard als je ook URL-structuren wilt valideren in je types.

Kan de tool omgaan met geneste arrays en objecten?

Ja. De tool verwerkt willekeurig diepe structuren recursief. Elk uniek object-type krijgt een eigen interface, ook als het op meerdere niveaus voorkomt.

Wat als mijn JSON mixed types bevat, zoals string | number?

De tool detecteert union types binnen een veld en genereert string | number automatisch. Voor complexere validatiebehoeften — zoals het genereren van een volledig typescript json schema — kun je de output als vertrekpunt gebruiken en handmatig aanvullen. Zie ook MDN — crypto.getRandomValues als je daarnaast veilige willekeurige ID's nodig hebt in je TypeScript-project.