JSON naar TypeScript converteren: Gids voor Types en Interfaces

Waarom JSON naar TypeScript converteren?

TypeScript-types zorgen voor veiligheid tijdens het programmeren (compile-time safety) en een betere ervaring voor de ontwikkelaar dankzij autocomplete en directe foutdetectie.

Snel voorbeeld

JSON-gegevens

{
  "id": 1,
  "naam": "Alice",
  "email": "alice@example.com",
  "actief": true
}

TypeScript Interface

interface Gebruiker {
  id: number;
  naam: string;
  email: string;
  actief: boolean;
}

Online Tools

quicktype.io (Aanbevolen)

Plak de JSON-code in de tool.

Selecteer 'TypeScript'.

Kopieer de gegenereerde types.

Opties:

• Interface versus Type.
• Optionele eigenschappen.
• Runtime-validatie.

Type Mapping (Vertaling van types)

| JSON Type | TypeScript Type |

|-----------|-----------------|

| string | string |

| number | number |

| true/false | boolean |

| null | null |

| array | T[] of Array |

| object | interface of type |

Omgaan met optionele en null-waarden

interface Gebruiker {
  naam: string;
  tussenvoegsel?: string;     // Optioneel
  verwijderdOp: string | null;  // Mag null zijn (nullable)
}

Arrays en geneste objecten

interface Response {
  gebruikers: Gebruiker[];
  metadata: {
    totaal: number;
    pagina: number;
  };
}

Gebruik van de quicktype CLI

# Installeren
npm install -g quicktype

# Types genereren vanuit een bestand
quicktype -s json -o types.ts data.json

# Types genereren vanuit een URL
quicktype -s json -o types.ts "https://api.example.com/users"

Runtime-validatie met Zod

TypeScript-types bestaan alleen tijdens de ontwikkeling. Om ook echt te controleren of de data die je API teruggeeft klopt, kun je Zod gebruiken:

import { z } from 'zod';

const GebruikerSchema = z.object({
  id: z.number(),
  naam: z.string(),
  active: z.boolean()
});

// Type afleiden vanuit het schema
type Gebruiker = z.infer<typeof GebruikerSchema>;

// Valideren wanneer de data binnenkomt
const resultaat = GebruikerSchema.safeParse(data);
if (resultaat.success) {
  const gebruiker: Gebruiker = resultaat.data;
}

Best Practices

Gebruik quicktype voor de eerste conversie van grote JSON-bestanden.

Verfijn de types handmatig waar nodig (bijv. gebruik Union Types).

Voeg runtime-validatie toe met Zod voor kritieke data.

Houd je types dicht bij de plek waar ze worden gebruikt.

Conclusie

Het converteren van JSON naar TypeScript-types verbetert de codekwaliteit en de ervaring van ontwikkelaars aanzienlijk. Gebruik quicktype voor snelheid en Zod voor zekerheid!