JSON naar TypeScript interface generator online

Wat het doet

De JSON naar TypeScript generator leest een JSON-voorbeeld, zoals een API-antwoord of een configuratiebestand, en schrijft TypeScript-interfaces die het beschrijven. In plaats van elk veld met de hand te typen, plak je één echt antwoord en krijg je types die je direct in je code kunt gebruiken, voor fetch-resultaten, Redux-state of testdata.

De generator bekijkt elke waarde, niet alleen de eerste. Getallen worden number, tekst wordt string, geneste objecten krijgen hun eigen interfaces en de items van een array worden samengevoegd. Een veld dat maar in sommige items voorkomt wordt zo als optioneel gemarkeerd, en een veld dat soms null is wordt als nullable getypeerd.

Zo gebruik je het

Plak JSON in het invoerveld, upload een .json-bestand of klik op Voorbeeld.
Stel de naam van het roottype in en kies de stijl: interface of type, null als | null of als optionele velden, readonly-eigenschappen en of elke declaratie export krijgt.
Kopieer de TypeScript of download hem als .ts-bestand.

Ongeldige JSON wordt gemeld met de regel en kolom van het probleem, zodat je het voorbeeld meteen kunt verbeteren.

Voorbeeld

Deze JSON:

{ "id": 7, "name": "Ada", "tags": ["admin"], "manager": { "id": 1, "email": null } }

wordt deze declaraties:

export interface Root {
  id: number;
  name: string;
  tags: string[];
  manager: Manager;
}

export interface Manager {
  id: number;
  email: null;
}

Tips

Eén voorbeeld laat alleen zien wat erin staat. Kan een veld een string of null zijn, neem dan van beide een voorbeeld op of zet meerdere voorbeelden in een array zodat ze worden samengevoegd.
Veldnamen die geen geldige identifiers zijn, zoals first-name, worden tussen aanhalingstekens geschreven, zodat de uitvoer altijd compileert.
Het resultaat is een startpunt. Beperk stringvelden tot unions van literals of Date als je meer weet dan het voorbeeld.
Heb je Go nodig? De JSON naar Go converter gebruikt dezelfde afleiding om structs met json-tags te schrijven.

Veelgestelde vragen

› Hoe worden geneste objecten behandeld?

Elk genest object wordt een eigen benoemde interface, vernoemd naar de sleutel in PascalCase, dus een veld address levert een interface Address op. Objecten met precies dezelfde structuur delen één interface, en botsende namen krijgen een nummer, zoals Address2.

› Hoe worden arrays getypeerd?

Alle items van een array worden samengevoegd tot één itemtype. Een array van objecten wordt een array van één interface, vernoemd naar het enkelvoud van de sleutel, dus orders geeft Order[]. Gemengde arrays worden een union zoals (string | number)[] en lege arrays worden unknown[].

› Wanneer wordt een veld als optioneel gemarkeerd?

Als het in sommige objecten van een array ontbreekt. Een veld dat overal voorkomt maar soms null is, wordt standaard geschreven als T | null. Zet null-waarden op optioneel om de null weg te laten en het veld met een vraagteken als optioneel te markeren.

› Moet ik interface of type kiezen?

Beide beschrijven dezelfde objectvormen. Interfaces kun je uitbreiden en samenvoegen, en veel stijlgidsen geven er de voorkeur aan voor objecttypes. Type-aliassen zijn handig als je het resultaat wilt combineren met unions of mapped types. Kies wat je codebase gebruikt.

› Wordt mijn JSON naar een server gestuurd?

Nee. De types worden in je browser afgeleid, dus je kunt veilig echte API-antwoorden plakken.