Přeskočit na hlavní obsah

Převodník JSON na TypeScript zdarma

Generujte TypeScript rozhraní nebo typové aliasy z libovolného JSON objektu nebo pole. Vložte JSON a okamžitě získejte připravené TypeScript typy.

Funguje offline po načtení
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;
}

Běžná použití

  • Generuj TypeScript typy z API odpovědíVložte odpověď API JSON a okamžitě generujte rozhraní TypeScript pro typ-bezpečný frontend kód.
  • Typy TypeScript pro objekty konfigurace a nastaveníGenerujte rozhraní TypeScript z JSON konfiguračních souborů, abyste přidali typovou bezpečnost do nastavení aplikace.
  • Generuj TypeScript typy z databázových záznamůPřeveďte JSON-exportované databázové záznamy nebo výsledky dotazů ORM na rozhraní TypeScript pro psaní datové vrstvy.
  • Typ mock dat a testovacích vzorkůGenerujte rozhraní TypeScript z JSON mock dat a testovacích vzorků na typ vašich jednotkových testů a příběhů Storybook.
  • Typ odpovědí rozhraní API třetích stranGenerujte rozhraní TypeScript z odpovědí rozhraní API třetích stran, kde chybí nebo jsou zastaralé oficiální typy.

Jak to funguje

Tento nástroj používá ručně napsaný rekurzivní algoritmus odvozování typů bez jakýchkoli externích knihoven — JSON.parse pro ověření a rozebrání vstupu, poté vlastní průchod, který projde každou hodnotu ve stromu JSON a vydá deklarace rozhraní nebo typu TypeScriptu přímo v prohlížeči. Nic se neodesílá na server.

  1. 1
    JSON rozebrané a ověřené
    Váš vstup se předá do JSON.parse. Pokud selže, přesná chyba parsování se okamžitě zobrazí pod vstupem. Úspěšné rozebrání vytvoří strom typovaných hodnot, který řídí zbytek převodu.
  2. 2
    Rekurzivní odvozování typů
    Rekurzivní funkce getType prochází každý uzel: primitivy se mapují na string, number, boolean nebo null; objekty spouští nové pojmenované rozhraní; u polí objektů se jejich klíče sloučí napříč všemi prvky, takže klíče přítomné jen v některých položkách se stanou volitelnými a konfliktní typy hodnot se spojí pomocí |.
  3. 3
    Pojmenování rozhraní bezpečné vůči kolizím
    Každý vnořený objekt dostane název v PascalCase odvozený z jeho klíče JSON (snake_case, kebab-case i mezery se normalizují). Pokud by dva strukturálně odlišné objekty sdílely stejný název, přidá se číselná přípona (Data, Data2, …) namísto tichého přepsání dřívější definice.
  4. 4
    Výstup vykreslen a ke stažení
    Vnořená rozhraní se vydávají jako první, poté kořenový typ, formátovaný jako export interface nebo export type podle vaší volby. Výsledek lze zkopírovat do schránky nebo stáhnout jako soubor .ts — vše sestaveno pomocí standardního Blob bez zpáteční cesty na server.

Související nástroje

Časté dotazy