JSON naar TypeScript converter

Plak een API-response en krijg direct bruikbare TypeScript-interfaces of type-aliassen, met geneste types, optionele velden en null-unions die automatisch worden afgeleid.

Draait in je browserGeen account nodigNiets wordt geüpload

TypeScript

Zo gebruik je de JSON naar TypeScript

  1. Plak een JSON-voorbeeld, zoals een API-response, in het linkerveld of open een .json-bestand.
  2. Stel de naam van het roottype in (bijvoorbeeld User of ApiResponse).
  3. Kies voor declaraties met interface of type en zet export, readonly of alles-optionele velden aan of uit.
  4. Kies unknown (veiliger) of any voor waarden die het voorbeeld niet kan prijsgeven, zoals lege arrays en nulls.
  5. Kopieer de gegenereerde code of download die als .ts-bestand.

Hoe de types worden afgeleid

  • Primitieven: strings, getallen en booleans worden string, number en boolean.
  • Geneste objecten worden eigen benoemde interfaces in PascalCase, dus billing_address wordt BillingAddress.
  • Arrays van objecten worden samengevoegd tot één itemtype met een naam in het enkelvoud: users geeft User[]. Een key die in sommige items ontbreekt, wordt optioneel (key?:).
  • Null-waarden worden gecombineerd met de andere waarden voor die key: string | null. Een key die altijd null is, valt terug op unknown of any.
  • Gemengde arrays worden union-arrays zoals (number | string)[].
  • Identieke vormen worden één keer gedeclareerd en hergebruikt, en verschillende vormen die dezelfde naam zouden krijgen, krijgen een numeriek achtervoegsel.
  • Keys die geen geldige identifiers zijn, zoals "first-name" of "2fa", worden tussen aanhalingstekens gezet.

interface vs. type

Voor gewone objectvormen zijn de twee vrijwel uitwisselbaar. interface-declaraties kun je uitbreiden en samenvoegen, en ze geven iets duidelijkere compilerfouten. type-aliassen kunnen ook unions en mapped types uitdrukken. Veel teams gebruiken interfaces voor API-modellen en types voor al het andere; kies wat je codebase of linter (@typescript-eslint/consistent-type-definitions) verwacht.

Betere types uit je voorbeeld

Types kunnen maar zo volledig zijn als het voorbeeld. Plak een response met optionele velden, of een array met meerdere gevarieerde items, zodat de generator optionele en nullable keys kan herkennen. Waarden zoals datums en enums komen in JSON binnen als gewone strings; maak ze achteraf met de hand specifieker, bijvoorbeeld status: 'active' | 'disabled'. Combineer de gegenereerde types voor validatie tijdens runtime met een schemalibrary zoals Zod.

Veelgestelde vragen

Wordt mijn JSON geüpload?
Nee. Types worden met JavaScript in je browser gegenereerd. API-responses met tokens of persoonsgegevens verlaten nooit je apparaat.
Hoe worden optionele properties herkend?
Als objecten in dezelfde array verschillende keys hebben, worden keys die in minstens één object ontbreken als optioneel gemarkeerd met ?. Bij één enkel object is elke key verplicht, tenzij je Alles optioneel aanvinkt.
Moet ik <code>unknown</code> of <code>any</code> gebruiken?
unknown is veiliger: TypeScript dwingt je de waarde te verfijnen voordat je hem gebruikt. any zet typecontrole voor die waarde uit. Gebruik het alleen als je de types later wilt verfijnen.
Waarom krijgt een ISO-datum het type <code>string</code>?
JSON heeft geen datumtype, dus datums worden als strings verstuurd. Zet je ze na het parsen om met new Date(), verander de property dan in je model naar Date.
Kan het grote of diep geneste JSON aan?
Ja. Het genereren schaalt lineair met de grootte van de invoer en draait lokaal, dus responses van meerdere megabytes worden ruim binnen een seconde omgezet.

Gerelateerde tools

JSON Formatter JSON opmaken, minificeren en valideren met fouten per regel/kolom. JSON Diff Twee JSON-objecten vergelijken en wijzigingen per pad tonen. YAML naar JSON YAML-configuraties omzetten naar JSON, met meerdere documenten en precieze fouten. cURL Converter Zet curl-commando's om naar fetch, Axios, Python, Go of PHP.