Ga naar hoofdinhoud
LibraTool logoLibraTool

Gratis JSON naar TypeScript-converter

Genereer TypeScript-interfaces of type-aliassen van elk JSON-object of -reeks. Plak je JSON en ontvang direct bruikbare TypeScript-typen.

Werkt offline na het laden
export interface User {
  id: number;
  name: string;
  email: string;
  isActive: boolean;
  score: number;
  tags: string[];
  address?: null;
}

export interface Root {
  user: User;
  createdAt: string;
  version: number;
}

Veelvoorkomend gebruik

  • Genereer TypeScript Typen van API AntwoordenPlak een API JSON-antwoord in en genereer onmiddellijk TypeScript-interfaces om uw frontend-code veilig in te typen.
  • TypeScript Types voor Configuratie- en InstellingenobjectenGenereer TypeScript-interfaces van JSON-configuratiebestanden om type-veiligheid toe te voegen aan uw toepassingsinstellingen.
  • Genereer TypeScript Types van Database RecordsConverteer database records geëxporteerd als JSON of ORM-queryresultaten naar TypeScript-interfaces voor gegevenslaagtypen.
  • Type Mock Data en Test FixturesGenereer TypeScript-interfaces van JSON mock data en test fixtures om uw unit tests en Storybook stories in te typen.
  • Type Antwoorden van API van Derde PartijGenereer TypeScript-interfaces van API-antwoorden van derden waar officiële types ontbreken of verouderd zijn.

Hoe het werkt

Deze tool gebruikt een zelfgeschreven recursief algoritme voor type-inferentie zonder externe bibliotheken — JSON.parse om de invoer te controleren en te parsen, en daarna een eigen doorloop die elke waarde in de JSON-boom afgaat en direct in de browser TypeScript-interface- of type-declaraties maakt. Er wordt niets naar een server gestuurd.

  1. 1
    JSON geparst en gecontroleerd
    Je invoer gaat naar JSON.parse. Mislukt dat, dan wordt de exacte parsefout direct onder de invoer getoond. Een geslaagde parse levert een getypeerde waardeboom op die de rest van de omzetting aanstuurt.
  2. 2
    Recursieve type-inferentie
    Een recursieve getType-functie loopt elk knooppunt af: primitieven worden string, number, boolean of null; objecten leveren een nieuwe benoemde interface op; bij arrays van objecten worden de sleutels over alle elementen samengevoegd, zodat sleutels die maar in sommige items voorkomen optioneel worden en tegenstrijdige waardetypes met | worden gecombineerd.
  3. 3
    Botsingsveilige interfacenamen
    Elk genest object krijgt een PascalCase-naam op basis van de JSON-sleutel (snake_case, kebab-case en spaties worden allemaal genormaliseerd). Als twee structureel verschillende objecten dezelfde naam zouden krijgen, wordt er een numeriek achtervoegsel toegevoegd (Data, Data2, …) in plaats van de eerdere definitie stilzwijgend te overschrijven.
  4. 4
    Uitvoer weergegeven en te downloaden
    Geneste interfaces worden eerst uitgevoerd, daarna het hoofdtype, opgemaakt als export interface of export type, afhankelijk van je keuze. Het resultaat kan naar het klembord worden gekopieerd of als .ts-bestand worden gedownload — allemaal gebouwd met een standaard Blob en zonder serververzoek.

Gerelateerde tools

📋

JSON Schema naar formulier

Plak een JSON Schema en ontvang een live, werkend formulier — tekst, nummer, selectievakje, dropdown en lijstvelden — en kopieer vervolgens de JSON die je invoer produceert. Ideaal voor het prototypen van API-aanvraaglichamen. Draait in je browser.

Probeer het
⌨️

Typsnelheidstest (WPM)

Meet je typsnelheid (WPM) en nauwkeurigheid met getimede, woorden-, citaat-, aangepaste en zen-tests. Live WPM, bruto snelheid, consistentie, een resultaatgrafiek, meerdere talen en feedback per teken — allemaal in je browser.

Probeer het
📐

CSS clamp()-generator

Genereer een vloeiende CSS clamp()-waarde voor responsieve typografie en spatiëring. Stel min/max-grootte en viewport-bereik in, bekijk een livevoorvertoning en kopieer de éénregelige CSS.

Probeer het

Veelgestelde vragen