JSON naar TypeScript

Uploaden

TypeScript-interface

Voer JSON aan de linkerkant in om conversie te starten

Gereed

Gratis online JSON naar TypeScript converter. Leidt JSON automatisch af naar standaard TS-interface-declaraties. Ondersteunt geneste interfaces, unions, optionele en readonly-velden, 2/4-spatie inspringopties, 100% in de browser.

Gerelateerde aanbevelingen

SQL Converter

JSON Formatter

JSON naar CSV

JSON naar YAML

JSONPath Online Query

SQL Formatteerhulpmiddel

Over JSON naar TypeScript: zet JSON-gegevens automatisch om in TS-types

JSON naar TypeScript is het proces van het converteren van JSON-geformatteerde gegevens (JSON-objecten of JSON-arrays) naar TypeScript-interface-declaraties. JSON (JavaScript Object Notation) is het standaard gegevensformaat voor REST-API's, configuratiebestanden en logs, terwijl TypeScript een statisch getypeerde superset van JavaScript is. In de dagelijkse ontwikkeling is het handmatig schrijven van TS-interfaces vanuit API-JSON foutgevoelig en tijdrovend; deze tool automatiseert die workflow.

In de kern leidt de tool de structuur van een JSON-object af en geeft een TypeScript-interface. Elke objectsleutel wordt een interface-eigenschap; het letterlijke type van elke waarde wordt toegewezen aan zijn TS-tegenhanger: strings worden `string`, getallen `number`, booleans `boolean`, null `null`, arrays `T[]`, en geneste objecten worden onafhankelijke sub-interfaces.

Type-inferentie is het hart van JSON naar TypeScript. JSON heeft slechts zes primitieve types (null, boolean, number, string, array, object), terwijl het basistypesysteem van TypeScript string, number, boolean, null, undefined, any, unknown, void, never, object, Array, T[], union-types (A | B) en meer omvat.

De afhandeling van geneste objecten is een kernmogelijkheid. Wanneer de JSON geneste objecten bevat, genereert de tool recursief onafhankelijke sub-interfaces om duplicatie te voorkomen. Bijvoorbeeld, `address: { street, city }` produceert een RootAddress-sub-interface, en de hoofdinterface verwijst ernaar via `address: RootAddress`.

De array-type-inferentie heeft drie modi. Ten eerste vallen lege arrays terug op `any[]` omdat er geen elementtype is om te inspecteren. Ten tweede, wanneer alle elementen hetzelfde type delen, is het resultaat `T[]` (bijvoorbeeld `string[]` of `User[]`). Ten derde, wanneer de elementtypes verschillen, is het resultaat een union-array `(A | B)[]` (bijvoorbeeld `(string | number)[]`).

Optionele velden (?) zijn belangrijk onder TypeScript strict mode. Wanneer de optie is ingeschakeld, scant de tool de waarde van elk veld; als null of undefined wordt gezien, voegt het `?` toe aan dat veld in de interface, bijv. `name?: string` betekent dat het veld mag ontbreken. Dit is van onschatbare waarde voor backend-API's die optionele velden retourneren. Readonly-velden benadrukken onveranderlijkheid en produceren code zoals `readonly id: number` voor configuratie, status-snapshots of DTO's.

interface vs type alias is een veelvoorkomende keuze voor TypeScript-gebruikers. De tool genereert interfaces omdat dit de standaardmanier is om de objectvorm te beschrijven: ze ondersteunen declaration merging, het implements-sleutelwoord en extends-overerving.

Realtime conversie is een praktische functie. De tool converteert 400ms na het stoppen met typen, zonder dat er op een knop hoeft te worden geklikt. In combinatie met de TypeScript-syntax-highlighting van CodeMirror kunnen gebruikers de gegenereerde interface direct zien en snel itereren.

JSON-fout zelfreparatie verhoogt de veerkracht van de tool. JSON uit de echte wereld heeft vaak afsluitende komma's, enkele aanhalingstekens, ontbrekende aanhalingstekens of opmerkingen. De ingebouwde tryFixJSON-routine wordt geactiveerd wanneer JSON.parse faalt en probeert veelvoorkomende fouten te herstellen.

De puur client-side verwerking is de centrale architectuurbeslissing. Alle JSON-analyse, type-inferentie en interface-generatie draaien in browser-JavaScript; er wordt nooit iets naar een server gestuurd.

Toepassingsgevallen

Converteer REST API- of GraphQL JSON-antwoorden snel naar TS-interfaces tijdens frontend-ontwikkeling, zonder handmatig typedefinities te schrijven.
Genereer TS-types voor React/Vue/Angular-component Props, State en parameters uit voorbeeld-JSON in enkele seconden.
Deel types tussen frontend en backend in een full-stack TypeScript-project, met de backend mock-JSON als single source of truth.
Genereer TypeScript-interfaces bij het integreren van API's van derden (verzending, weer, betaling) zonder lange documentatie te lezen.
Reverse-engineer typedefinities uit mock-gegevens, testfixtures of JSON-configuratiebestanden om typeveiligheid en IDE-hints te versterken.
Converteer JSON Schema-exporten van database-ORM's naar TypeScript-interfaces voor Node.js backend-DTO-definities.
Leer TypeScript door bestaande JSON om te zetten in interface-voorbeelden om geneste types, unions en optionele velden te begrijpen.
Refactor verspreide JS-object-literals naar formele interfaces om de leesbaarheid van code en typeveiligheid te verbeteren.

Hoe te gebruiken

Plak JSON in de linker editor, klik op Upload om een .json/.txt-bestand te selecteren, of klik op Voorbeeld om het ingebouwde voorbeeld te laden.
Klik op de interfacenaam-knop aan de rechterkant van de werkbalk (of het tandwiel-pictogram) om de hoofdinterface te hernoemen (standaard Root) en optionele/readonly-velden in/uit te schakelen.
De tool converteert automatisch met een debounce van 400ms. Bekijk de gegenereerde TypeScript-interface aan de rechterkant met CodeMirror-highlighting.
Schakel tussen 2-spatie en 4-spatie inspringing via de werkbalk en pas de verdeling tussen linker- en rechterpaneel aan voor de beste weergave.
Klik op Kopiëren om de TS-code op het klembord te plaatsen, of klik op Downloaden om het op te slaan als een `${interfaceName}.ts`-bestand (bijv. User.ts).
Plak de code in de `types/` of `src/types/` map van je project en importeer deze waar nodig.

Functies

Slimme type-inferentie: herkent automatisch null, boolean, number, string, array en object en wijst deze toe aan native TS-types.
Uitbreiding van geneste objecten: elk genest object wordt zijn eigen sub-interface (bijv. RootAddress) voor een schone, duplicaatvrije typehiërarchie.
Array-type-intelligentie: homogene arrays worden `T[]`, gemengde-type arrays worden union-arrays `(A | B)[]`, lege arrays vallen terug op `any[]`.
Markering van optionele velden: wanneer ingeschakeld, krijgen null- of undefined-velden de `?`-modificator, wat code oplevert die compatibel is met TypeScript strict mode.
Readonly-veld ondersteuning: wanneer ingeschakeld, krijgt elk veld de `readonly`-modificator, ideaal voor onveranderlijke status, configuratie en DTO's.
Aangepaste interfacenaam: de hoofdinterface-naam is configureerbaar (standaard Root) en het gedownloade bestand krijgt deze naam (bijv. User.ts).
2/4-spatie inspringopties: schakel tussen 2-spatie (ESLint-standaard) en 4-spatie inspringing via de werkbalk.
Realtime automatische conversie: de tool converteert 400ms na het stoppen met typen, met ondersteuning voor plakken, bestandsupload en voorbeeld laden.
JSON-fout zelfreparatie: de ingebouwde tryFixJSON-routine handelt afsluitende komma's, enkele aanhalingstekens en ontbrekende sleutel-aanhalingstekens automatisch af.
TypeScript code-highlighting: de rechtereditor gebruikt CodeMirror met de TypeScript-taalextensie voor duidelijke syntaxiskleuring.
Kopiëren en downloaden: kopieer het resultaat met één klik naar het klembord of sla het op als een standaard .ts-bestand klaar voor je project.
100% in de browser: alle parsing, inferentie en interface-generatie vinden plaats in client-side JavaScript; de oorspronkelijke JSON verlaat nooit je apparaat.

Veelgestelde vragen

Hoe converteer ik JSON naar een TypeScript-interface?

Plak je JSON in de linker editor en de tool leidt automatisch het type van elk veld af (string, number, boolean, array, object, enz.) en genereert een standaard TypeScript-interface. Geneste objecten worden geëxtraheerd in afzonderlijke sub-interfaces. De conversie wordt automatisch 400ms na het stoppen met typen uitgevoerd.

Genereert de tool type aliases of interfaces?

Deze tool genereert uitsluitend TypeScript-interface-declaraties (geen type aliases). Interfaces zijn de standaardmanier om de vorm van een object in TypeScript te beschrijven: ze ondersteunen declaration merging en het implements-sleutelwoord.

Hoe markeer ik velden als optioneel?

Schakel "Optionele velden (?)" in het instellingenpaneel in. De tool scant de waarde van elk veld en voegt automatisch de `?`-modificator toe aan de interface wanneer null of undefined wordt gevonden. Bijvoorbeeld, `name?: string` betekent dat het veld mag ontbreken.

Hoe genereer ik readonly-velden?

Schakel "Readonly-velden" in het instellingenpaneel in. Elk veld krijgt de `readonly`-modificator, bijvoorbeeld `readonly id: number`. Dit benadrukt onveranderlijkheid en is ideaal voor configuratie, status-snapshots of DTO-definities.

Hoe gaat de tool om met arrays?

De tool analyseert de elementtypes van elke array. Wanneer alle elementen hetzelfde type delen, geeft het `T[]` (bijvoorbeeld `string[]`); wanneer de types verschillen, geeft het een union-array `(A | B)[]` (bijvoorbeeld `(string | number)[]`); wanneer de array leeg is, valt het terug op `any[]`.

Wordt een genest object zijn eigen interface?

Ja. Elk genest object wordt zijn eigen sub-interface, genoemd door de naam van de bovenliggende interface te combineren met de veldnaam in PascalCase. Bijvoorbeeld, een Root-interface die een `address`-object bevat, produceert Root en RootAddress.

Kan ik de interfacenaam aanpassen?

Ja. Klik op de interfacenaam-knop aan de rechterkant van de werkbalk (of open het instellingendialoogvenster) om de hoofdinterface te hernoemen (de standaardwaarde is Root). Het gedownloade .ts-bestand krijgt ook deze waarde als naam.

Kan het gedownloade .ts-bestand direct in een project worden gebruikt?

Ja. De gegenereerde code volgt TypeScript best practices, bevat volledige typedefinities, geneste interfaces en union-types, en kan ongewijzigd in React-, Vue-, Angular- of Node.js-projecten worden geplakt.

Wat als mijn JSON niet parseert?

Wanneer de JSON afsluitende komma's, ontbrekende aanhalingstekens of enkele aanhalingstekens in plaats van dubbele bevat, roept de tool automatisch tryFixJSON aan om een reparatie te proberen. Als de reparatie slaagt, wordt u op de hoogte gesteld; anders toont het rechterpaneel de exacte foutlocatie.

Welke JSON-structuren worden ondersteund?

Alle geldige JSON wordt ondersteund: primitieven (null, boolean, number, string), arrays van elke diepte, geneste objecten op elke diepte en arrays van gemengde types (die union-types worden). Ongeldige invoer zoals functies, Symbols of undefined-waarden maakt geen deel uit van de JSON-specificatie en wordt niet geaccepteerd.

Kan ik de inspringgrootte kiezen?

Ja. Een vervolgkeuzemenu in de rechterwerkbalk laat u schakelen tussen 2-spatie en 4-spatie inspringing. Twee spaties komen overeen met de ESLint/Prettier-standaard; vier spaties passen bij projecten die de voorkeur geven aan bredere inspringing.

Hoe verschilt dit van JSON Schema of Zod?

JSON Schema is geweldig voor runtime gegevensvalidatie (API-grenzen, gebruikersinvoervalidatie). Zod en yup zijn TypeScript-vriendelijke runtime validators die TS-types kunnen afleiden uit een schema. Deze tool is een lichtgewicht pure type-definitie generator; voert geen runtime-controles uit, richt zich op frontend statische typing, is sneller en heeft geen afhankelijkheden.

Probleemoplossing

De gegenereerde interface ziet er onjuist uit. Wat moet ik doen?

Veelvoorkomende oorzaken: JSON-parseerfout, onjuiste identificatie van geneste objecten of onjuiste array-type-inferentie. Probeer deze stappen: 1) Valideer de JSON met een JSON-formatter; 2) Controleer bij geneste objecten de sub-interface-verwijzingen; 3) Bevestig bij arrays dat de elementtypes consistent zijn; 4) Genereer opnieuw of bewerk de uitvoer handmatig. De interface is een eerste concept, dus pas details altijd aan op de echte API.

Het gedownloade .ts-bestand compileert niet in mijn project.

Waarschijnlijke oorzaken: 1) tsconfig.json heeft geen strict mode maar de gegenereerde code gebruikt readonly; 2) de interfacenaam botst met een bestaand type; 3) een veldnaam is een TypeScript-sleutelwoord (zoals class of type). Oplossing: pas strict mode aan, hernoem de interface of zet het conflicterende veld tussen aanhalingstekens (bijv. "class": string).

De JSON bevat geneste arrays maar het afgeleide type is onjuist.

De tool handelt multidimensionale arrays (bijv. [[1, 2], [3, 4]]) recursief af en produceert number[][]. Als de types van geneste array-elementen verschillen, geeft de tool ((A | B)[])[] uit. Lege arrays worden altijd any[] omdat er geen elementtype is om af te leiden.

null-waarden worden aan het `null`-type toegewezen in plaats van optionele velden.

Standaard wijst de tool JSON null-waarden aan het TS-`null`-type toe (bijv. middleName: null). Om optionele velden te produceren: 1) schakel de optie Optionele velden in (aanbevolen); 2) verwijder de null-waarden uit de JSON zodat het veld ontbreekt; of 3) verander na generatie handmatig `null` in `string | null` of gebruik `?`.

De interfacenaam en de gedownloade bestandsnaam komen niet overeen.

Beide worden aangestuurd door dezelfde waarde, de instelling Interfacenaam (standaard Root). Het gedownloade bestand heet `${interfaceName}.ts`. Als ze niet synchroon lijken, controleer dan of de tool in meerdere tabbladen met verschillende instellingen is geopend. Heropen de pagina of vernieuw de instellingen om ze op één lijn te brengen.

De gegenereerde code zit vol met `any`-types.

Waarschijnlijke oorzaken: 1) de JSON bevat waarden die de parser niet kon herkennen; 2) arrays zijn leeg en vallen terug op any[]; 3) velden zijn null en de optie voor optioneel is uitgeschakeld. Oplossing: controleer de gegevensintegriteit, voeg meer voorbeeldgegevens toe om de inferentie te verbeteren, of specificeer handmatig de types voor altijd lege velden (bijv. User[]).

Hoe voeg ik de gegenereerde interface samen met een bestaand type?

TypeScript-interfaces ondersteunen declaration merging: interfaces met dezelfde naam voegen hun leden automatisch samen. Declareer eenvoudig een interface met dezelfde naam in je project en exporteer deze; bijvoorbeeld, de tool geeft `export interface User { id: number }` uit en jij schrijft `export interface User { name: string }`, en ze voegen automatisch samen tot `{ id: number; name: string }`.

Woordenlijst

JSON (JavaScript Object Notation): Lichtgewicht gegevensuitwisselingsformaat gebaseerd op de syntaxis van JavaScript-objecten, maar onafhankelijk van elke programmeertaal. Ondersteunt zes basistypes: object ({}), array ([]), string, number, boolean en null.
TypeScript: Een door Microsoft ontwikkelde superset van JavaScript die statische typedefinities, interfaces, generics en andere functies toevoegt. TypeScript-code wordt gecompileerd naar gewone JavaScript en draait in de browser of op Node.js.
interface: Een TypeScript-sleutelwoord dat de vorm van een object beschrijft. Syntaxis: `interface Name { prop: type; }`. Ondersteunt declaration merging, het implements-sleutelwoord en extends-overerving.
type alias: Een TypeScript-sleutelwoord dat een naam aan een type toewijst. Syntaxis: `type Name = ...`. Handig voor union-types, intersection-types en functietypes. Deze tool geeft uitsluitend interfaces uit.
Type-inferentie: Het proces dat deze tool gebruikt om het TS-type voor elke JSON-waarde te bepalen op basis van zijn typeof en vorm.
Optioneel veld (?): TypeScript-modificator die een veld als mogelijk ontbrekend markeert. `name?: string` betekent dat het veld name mogelijk niet bestaat. Wanneer de optie voor optionele velden van de tool is ingeschakeld, krijgen velden waarvan de waarde null of undefined is automatisch de `?`-modificator.
Readonly-veld: TypeScript-modificator die een veld markeert als onveranderlijk na het aanmaken van het object. `readonly id: number` betekent dat id niet opnieuw kan worden toegewezen.
Union-type: TypeScript-type dat een waarde toestaat om een van meerdere types te zijn. Geschreven als `A | B`. De tool gebruikt deze notatie wanneer array-elementen verschillende types hebben.
Array-type: De TypeScript-syntaxis voor arrays, beschikbaar in twee vormen: de generieke vorm `Array<T>` en de korte vorm `T[]`. De tool gebruikt altijd de korte vorm.
Geneste interface: Een interface die naar andere interfaces verwijst om een typehiërarchie te vormen. De tool produceert een sub-interface voor elk genest object.
TypeScript strict mode: Verzameling strikte compileropties in TypeScript (noImplicitAny, strictNullChecks, strictFunctionTypes en meer). Met strictNullChecks ingeschakeld zijn null en undefined onafhankelijke types.
DTO (Data Transfer Object): Object dat wordt gebruikt om gegevens tussen lagen over te dragen (bijvoorbeeld tussen een API en een service). TypeScript-projecten beschrijven DTO's typisch met interfaces, vaak met readonly om onveranderlijkheid af te dwingen.
Declaration merging: TypeScript-functie voor interfaces: interfaces met dezelfde naam voegen hun leden automatisch samen.
tsconfig.json: Het TypeScript-projectconfiguratiebestand in de projectroot. Bevat compilerOptions (target, module, strict en meer), include en exclude.
tryFixJSON: De ingebouwde JSON-reparatieroutine van de tool die afsluitende komma's, enkele aanhalingstekens in plaats van dubbele, ontbrekende sleutel-aanhalingstekens, opmerkingen en andere veelvoorkomende JSON-syntaxisfouten afhandelt.

JSON-naar-TypeScript type-toewijzingsregels

De volledige set regels die de getTsType-functie gebruikt om JSON-waarden aan TypeScript-types toe te wijzen:

JSON-waarde	Voorbeeld	TypeScript-type	Detectieregel
`null`	`null`	`null`	JSON null wordt direct toegewezen aan TS null
`undefined`	`undefined`	`undefined`	undefined-waarden worden toegewezen aan TS undefined (alleen tijdens runtime)
`boolean`	`true / false`	`boolean`	typeof boolean wordt toegewezen aan TS boolean
`integer`	`1, 100, -9999`	`number`	Gehele getallen en zwevendekommagetallen worden toegewezen aan TS number
`float`	`3.14, -0.5, 1e10`	`number`	Alle numerieke letterlijke waarden worden toegewezen aan number
`string`	`"Alice", "Amsterdam"`	`string`	typeof string wordt toegewezen aan TS string
`empty array`	`[]`	`any[]`	Lege arrays vallen terug op any[]
`homogeneous array`	`[1, 2, 3]`	`T[] (bijv. number[])`	Elementen van hetzelfde type produceren één array-type
`mixed array`	`[1, "a"]`	`(A \| B)[] (bijv. (number \| string)[])`	Elementen van gemengde types produceren een union-array
`object`	`{a: 1, b: "x"}`	`SubInterface (bijv. Root)`	Geneste objecten worden onafhankelijke sub-interfaces die worden gerefereerd

interface vs type alias vergelijking

Waarom deze tool interface genereert in plaats van type alias, en hoe ze zich verhouden in TypeScript-projecten:

Mogelijkheid	interface	type alias	Opmerkingen
Beschrijving objectvorm	✓ (voorkeur)	✓ (ook ondersteund)	Beide werken; tool geeft interface uit
Declaration merging	✓ (zelfde naam voegt samen)	✗ (fout bij duplicaat)	interface maakt geleidelijke uitbreiding mogelijk
implements/extends	✓ (klassen kunnen implements)	△ (alleen object-types)	interface is natuurlijker in OOP
Union-types (A \| B)	✗	✓	type is beknopter voor unions
Intersection-types (A & B)	✗	✓	type is beknopter voor intersections
Functietypes	△ (vereist call signature)	✓ (direct)	type is intuïtiever voor functies
Prestaties (veel types)	iets sneller	iets langzamer	interface voegt incrementeel samen
Keuze van deze tool	✓ eenduidig gebruik	✗	Deze tool richt zich op objecttypes

Regels voor generatie van optionele en readonly-velden

Hoe de twee schakelopties de gegenereerde code beïnvloeden en wanneer welke te gebruiken:

Optie	Trigger	Gegenereerde syntaxis	Beste voor
Optioneel (?): uit	(standaard)	`name: string`	Strikt, alle velden vereist
Optioneel (?): aan	value === null \|\| value === undefined	`name?: string`	Optionele velden, ontbrekende gegevens
Readonly: uit	(standaard)	`name: string`	Algemene types, beschrijfbare velden
Readonly: aan	is van toepassing op alle velden	`readonly name: string`	Onveranderlijke status, configuratie, DTO's
Beide aan	beide voorwaarden zijn van toepassing	`readonly name?: string`	API-antwoord-snapshots, optionele configuratie

Privacy & Security

Deze JSON-naar-TypeScript-tool draait volledig in je browser. JSON-analyse, type-inferentie en interface-generatie vinden plaats in client-side JavaScript; er wordt niets naar een server gestuurd. Bestandsuploads gebruiken de native FileReader API en gaan nooit via een tussendienst. De tool gebruikt geen trackingcookies en verzamelt geen invoer- of gebruiksgegevens. Alle invoer en uitvoer worden uit het geheugen gewist zodra de pagina wordt gesloten of vernieuwd. Veilig te gebruiken voor JSON die persoonsgegevens, zakelijke geheimen of andere gevoelige inhoud bevat.

Authoritative References

TypeScriptTypeScript interface-handboek
TypeScriptIntroductie TypeScript-handboek
MDNJSON-specificatie - MDN Web Docs
TypeScriptTypeScript Playground
TypeScripttsconfig.json referentie
ZodZod - TypeScript-first schema-validatie