JSON to TypeScript

Wat is JSON naar TypeScript-conversie?

Plak een JSON-payload en je krijgt TypeScript interfaces terug — getypeerde contracten die precies beschrijven welke eigenschappen een object heeft en welk type elke eigenschap bevat. Zonder interfaces komt data van JSON.parse() binnen als any, waardoor je geen editorhulp hebt en de compiler geen controles uitvoert op property-toegang of toewijzing. JSON naar TypeScript converteren geeft je die veiligheid zonder interfaces met de hand te schrijven.

TypeScript dekt alle zes JSON-waardetypen: string, number, boolean, null, object en array. Elk genest JSON-object wordt omgezet naar een eigen benoemde interface. Arrays worden getypeerd op basis van hun eerste element. Het resultaat komt overeen met wat JSON.parse() daadwerkelijk teruggeeft tijdens runtime, zodat de interfaces echte data weerspiegelen in plaats van giswerk.

Interfaces met de hand schrijven voor grote of diep geneste JSON is omslachtig en foutgevoelig. Een JSON naar TypeScript-generator leest de structuur automatisch, verwerkt nesting recursief en geeft in seconden schone interfacecode terug. Dit is bijzonder handig bij het koppelen van een onbekende API, prototypen met mockdata, of het migreren van een JavaScript-codebase naar TypeScript. Het bevrijdt je ook van het handmatig bijhouden van geneste property-namen en -typen, zodat je je kunt richten op applicatielogica in plaats van type-boilerplate.

Waarom een JSON naar TypeScript-generator gebruiken?

TypeScript interfaces met de hand genereren is praktisch voor kleine objecten, maar breekt snel af bij geneste structuren of grote API-responses. Denk aan een API-response met 50 velden en drie niveaus van nesting — dat met de hand schrijven betekent tientallen interfaces, elk een potentiële bron van typefouten of vergeten nullable velden. Een geautomatiseerde generator produceert de volledige set in milliseconden en verkleint de kans op type-afwijkingen tussen je code en de data die het verwerkt. Naast nauwkeurigheid houdt het je types gesynchroniseerd met het werkelijke API-contract. Wanneer een service de shape van zijn response wijzigt, plak je eenvoudig de bijgewerkte JSON en genereert opnieuw — veel sneller dan elk gewijzigd property handmatig opzoeken in een interface-bestand.

JSON naar TypeScript-toepassingen

JSON naar TypeScript type-mapping referentie

Elke JSON-waarde mapt naar een TypeScript-type. De onderstaande tabel toont hoe elk JSON-primitief en structuurtype wordt vertaald. Deze mapping volgt de ECMA-404 JSON-standaard en de ingebouwde typen van TypeScript.

TypeScript interface vs type alias

TypeScript biedt twee manieren om objectshapes te beschrijven: interface-declaraties en type aliases. Beide werken voor het weergeven van JSON-structuren, maar ze verschillen in uitbreiding en merge-gedrag. De meeste JSON-naar-TypeScript-generators produceren interfaces omdat dit de idiomatische keuze is voor objectshapes in TypeScript.

Codevoorbeelden

Hieronder staan voorbeelden van het genereren van TypeScript interfaces vanuit JSON in verschillende talen en tools. Elk fragment produceert uitvoerbare uitvoer.

// Manual interface definition from a JSON shape
const json = '{"id": 1, "name": "Alice", "active": true}';
const parsed = JSON.parse(json);

interface User {
  id: number;
  name: string;
  active: boolean;
}

const user: User = parsed;
console.log(user.name); // "Alice" — fully typed

import JsonToTS from 'json-to-ts';

const json = {
  id: 1,
  name: "Alice",
  address: { street: "123 Main St", city: "Springfield" },
  tags: ["admin", "user"]
};

const interfaces = JsonToTS(json, { rootName: "User" });
console.log(interfaces.join("\n\n"));
// interface Address {
//   street: string;
//   city: string;
// }
//
// interface User {
//   id: number;
//   name: string;
//   address: Address;
//   tags: string[];
// }

# Install: pip install datamodel-code-generator
# Generate TypeScript-style types from JSON using Pydantic models

# Command line:
# datamodel-codegen --input data.json --output model.py

# Or generate TypeScript directly with quicktype:
# pip install quicktype
# quicktype --lang ts --src data.json --out types.ts

import json

data = {"id": 1, "name": "Alice", "scores": [98, 85, 92]}

# Python equivalent using TypedDict (Python 3.8+)
from typing import TypedDict, List

class User(TypedDict):
    id: int
    name: str
    scores: List[int]

user: User = data  # type-checked by mypy

# Install quicktype globally
npm install -g quicktype

# Generate TypeScript interfaces from a JSON file
quicktype --lang ts --src data.json --out types.ts

# From a JSON string via stdin
echo '{"id": 1, "name": "Alice"}' | quicktype --lang ts

# Output:
# export interface Root {
#   id:   number;
#   name: string;
# }

Veelgestelde vragen