Preskoči na glavno vsebino
LibraTool logoLibraTool

Pretvornik JSON v TypeScript — brezplačno

Ustvarite vmesnike TypeScript ali vzdevke tipov iz katerega koli objekta ali polja JSON. Prilepite JSON in takoj dobite tipe TypeScript, pripravljene za uporabo.

Deluje brez povezave po nalaganju
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;
}

Pogosta področja uporabe

  • Ustvari vrste TypeScript iz odzivov APIPrilepite JSON odgovor API in takoj ustvarite vmesnike TypeScript za varno tipiziranje kode sprednjega dela.
  • Vrste TypeScript za konfiguracije in predmete nastavitevUstvarite vmesnike TypeScript iz datotek konfiguracije JSON, da dodate varnost tipa za nastavitve aplikacije.
  • Ustvari vrste TypeScript iz zapisov baze podatkovPretvorite izvožene zapise baze podatkov JSON ali rezultate poizvedb ORM v vmesnike TypeScript za tipiziranje plasti podatkov.
  • Tip laznih podatkov in testnih napravUstvarite vmesnike TypeScript iz laznih podatkov JSON in testnih naprav za tipiziranje enot testov in zgodb Storybook.
  • Tip odzivov API tretjih osebUstvarite vmesnike TypeScript iz odzivov API tretjih oseb, kjer manejo ali so zastarele uradne vrste.

Kako deluje

To orodje uporablja ročno napisan rekurziven algoritem izpeljave tipov brez zunanjih knjižnic — JSON.parse za preverjanje in razčlenjevanje vnosa, nato pregled po meri, ki pregleda vsako vrednost v drevesu JSON in ustvari deklaracije vmesnika ali tipa TypeScript neposredno v brskalniku. Nič se ne pošlje na strežnik.

  1. 1
    JSON razčlenjen in preverjen
    Vaš vnos se preda JSON.parse. Če spodleti, se natančna napaka razčlenjevanja takoj prikaže pod vnosom. Uspešna razčlenitev ustvari tipizirano drevo vrednosti, ki vodi preostanek pretvorbe.
  2. 2
    Rekurzivna izpeljava tipov
    Rekurzivna funkcija getType pregleda vsako vozlišče: primitivi se preslikajo na string, number, boolean ali null; predmeti sprožijo nov poimenovan vmesnik; polja predmetov imajo svoje ključe združene čez vse elemente, tako da ključi, prisotni le v nekaterih elementih, postanejo izbirni, nasprotujoči si tipi vrednosti pa se povežejo z |.
  3. 3
    Poimenovanje vmesnikov, varno pred trki
    Vsak gnezden predmet dobi ime v PascalCase, izpeljano iz njegovega ključa JSON (snake_case, kebab-case in presledki so vsi normalizirani). Če bi si dva strukturno različna predmeta delila isto ime, se doda številčna pripona (Data, Data2, …) namesto tihega prepisovanja prejšnje definicije.
  4. 4
    Izpis izrisan in prenosljiv
    Gnezdeni vmesniki so izpisani najprej, nato koreninski tip, oblikovan kot export interface ali export type glede na vašo izbiro. Rezultat lahko kopirate v odložišče ali prenesete kot datoteko .ts — vse zgrajeno s standardnim Blob in brez povratnega potovanja na strežnik.

Sorodna orodja

📋

JSON Schema v obrazec

Prilepite JSON Schema in dobite živi delujoči obrazec — besedilna, številčna, potrditvena, spustna in seznamska polja — nato kopirajte JSON, ki ga ustvarijo vaši vnosi. Odlično za prototipiranje teles zahtev API. Deluje v vašem brskalniku.

Poskusite
⌨️

Test hitrosti tipkanja (BPM)

Izmerite hitrost tipkanja (BPM) in natančnost s testi na čas, število besed, citate, po meri in zen. BPM v živo, surova hitrost, dosledost, graf rezultatov, več jezikov in povratna informacija po znakih — vse v vašem brskalniku.

Poskusite
📐

Generator CSS clamp()

Ustvarite tekočo vrednost CSS clamp() za odzivno tipografijo in razmike. Nastavite minimalno/maksimalno velikost in obseg vidnega polja, oglejte si živi predogled in kopirajte enolinijski CSS.

Poskusite

Pogosto zastavljena vprašanja