Pereiti prie pagrindinio turinio
LibraTool logoLibraTool

JSON į TypeScript konverteris nemokamai

Generuokite TypeScript sąsajas arba tipo pseudonimus iš bet kokio JSON objekto ar masyvo. Įklijuokite JSON ir momentaliai gaukite paruoštus naudoti TypeScript tipus.

Veikia neprisijungus, kai įkeliama
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;
}

Dažniausi naudojimo būdai

  • Sukurti TypeScript tipus iš API atsakymųĮkliudykite API JSON atsakymą ir iš karto sukurkite TypeScript sąsają, norėdami saugiai įvesti priekinės pabaigos kodą.
  • TypeScript tipai konfigūracijai ir nustatymo objektamsSukurkite TypeScript sąsajas iš JSON konfigūracijos failų, norėdami pridėti tipo saugumą į programos nustatymus.
  • Sukurti TypeScript tipus iš duomenų bazės įrašųKonvertuokite JSON eksportuotus duomenų bazės įrašus arba ORM užklausų rezultatus į TypeScript sąsajas duomenų sluoksnio tipavimui.
  • Tipo slapti duomenys ir bandymo armatūraSukurkite TypeScript sąsajas iš JSON slapčių duomenų ir bandymo armatūros, norėdami įvesti vieneto testus ir Storybook istorijas.
  • Tipo trečių šalių API atsakymaiSukurkite TypeScript sąsajas iš trečių šalių API atsakymų, kur trūksta ar yra pasenę oficialūs tipai.

Kaip tai veikia

Šis įrankis naudoja rankomis parašytą rekursyvų tipų nustatymo algoritmą, be jokių išorinių bibliotekų — JSON.parse įvesčiai patikrinti ir analizuoti, tada pasirinktinis apėjimas, einantis per kiekvieną reikšmę JSON medyje ir generuojantis TypeScript interface ar type deklaracijas tiesiai naršyklėje. Niekas nesiunčiama į serverį.

  1. 1
    JSON analizuojamas ir patikrinamas
    Jūsų įvestis perduodama JSON.parse. Jei nepavyksta, tiksli analizavimo klaida iš karto parodoma po įvestimi. Sėkmingas analizavimas sukuria tipizuotą reikšmių medį, kuris valdo likusią konvertavimo dalį.
  2. 2
    Rekursyvus tipų nustatymas
    Rekursyvi getType funkcija apeina kiekvieną mazgą: primityvai susiejami su string, number, boolean ar null; objektai sukuria naują pavadintą interface; objektų masyvai turi savo raktus sujungtus visuose elementuose, todėl raktai, esantys tik kai kuriuose įrašuose, tampa pasirenkamais, o konfliktuojantys reikšmių tipai sujungiami su |.
  3. 3
    Konfliktų nesukelantis interface pavadinimų kūrimas
    Kiekvienas įdėtasis objektas gauna PascalCase pavadinimą, išvestą iš jo JSON rakto (snake_case, kebab-case ir tarpai normalizuojami). Jei du struktūriškai skirtingi objektai turėtų tą patį pavadinimą, prie jo pridedama skaitinė priesaga (Data, Data2, …), o ne tyliai perrašoma ankstesnė deklaracija.
  4. 4
    Išvestis atvaizduojama ir prieinama atsisiuntimui
    Įdėtieji interface pirmiausia išvedami, tada šakninis tipas, formatuojamas kaip export interface arba export type, priklausomai nuo jūsų pasirinkimo. Rezultatą galima nukopijuoti į iškarpinę arba atsisiųsti kaip .ts failą — viskas sukurta naudojant standartinį Blob, be jokio kreipimosi į serverį.

Susiję įrankiai

📋

JSON Schema į formą

Įklijuokite JSON Schema ir gaukite gyvą, veikiančią formą — teksto, skaičių, žymimųjų laukelių, išskleidžiamojo sąrašo ir sąrašo laukus — tada nukopijuokite JSON, kurį sukuria jūsų įvestys. Puiku API užklausų turinio prototipams kurti. Veikia jūsų naršyklėje.

Išbandykite
⌨️

Spausdinimo greičio testas (ŽPM)

Išmatuokite savo rašymo greitį (ŽPM) ir tikslumą atlikdami testus pagal laiką, žodžių skaičių, citatas, savo tekstą ir zen režimą. Tiesioginis ŽPM, neapdorotas greitis, nuoseklumas, rezultatų grafikas, kelios kalbos ir grįžtamasis ryšys apie kiekvieną simbolį — viskas jūsų naršyklėje.

Išbandykite
📐

CSS clamp() generatorius

Generuokite dinamišką CSS clamp() reikšmę adaptyviai tipografijai ir tarpams. Nustatykite minimalų/maksimalų dydį ir ekrano dydžio diapazoną, peržiūrėkite gyvai ir nukopijuokite vienos eilutės CSS.

Išbandykite

Dažnai užduodami klausimai