Liigu põhisisu juurde
LibraTool logoLibraTool

JSON TypeScripti konverter tasuta

Genereeri TypeScripti liideseid või tüübi aliaseid mis tahes JSON-objektist või massiivist. Kleebi oma JSON ja saa koheselt kasutatavad TypeScripti tüübid.

Töötab võrguühenduseta pärast laadimist
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;
}

Levinud kasutusviisid

  • Looge TypeScript tüübid API vastustestKleepige API JSON vastus ja looge kohe TypeScript liidesed turvaliseks esiosa-koodi tipeerimiseks.
  • TypeScript tüübid konfiguratsioonile ja seadete objektideleLooge TypeScript liidesed JSON konfiguratsiooni failidest, et lisada tüübi turvalisus rakenduse seadetele.
  • Looge TypeScript tüübid andmebaasi kirjetestTeisendage JSON-eksporteeritud andmebaasi kirjed või ORM-i päringu tulemused TypeScript liideseks andmete kihi tipeerimiseks.
  • Tüüp võlts andmeid ja testarmatureLooge TypeScript liidesed JSON võlts andmetest ja testi armatuuridest ühiku testide ja Storybooki lugude tipeerimiseks.
  • Tüüp kolmanda osapoole API vastusedLooge TypeScript liidesed kolmanda osapoole API vastustest, kus puuduvad või on aegunud ametlikud tüübid.

Kuidas see töötab

See tööriist kasutab käsitsi kirjutatud rekursiivset tüübituletusalgoritmi ilma väliste teekideta — JSON.parse sisendi valideerimiseks ja parsimiseks, seejärel kohandatud läbimine, mis käib läbi iga väärtuse JSON-puus ja väljastab TypeScript interface või type deklaratsioone otse brauseris. Midagi ei saadeta serverisse.

  1. 1
    JSON parsitud ja valideeritud
    Su sisend antakse JSON.parse'ile. Kui see ebaõnnestub, ilmub täpne parsimisviga kohe sisendi all. Edukas parsimine toodab tüübitud väärtuspuu, mis juhib ülejäänud teisendust.
  2. 2
    Rekursiivne tüübituletus
    Rekursiivne getType funktsioon käib läbi iga sõlme: primitiivid kaardistatakse string, number, boolean või null'iks; objektid käivitavad uue nimelise liidese; objektide massiividel liidetakse võtmed kõikide elementide vahel, nii et võtmed, mis on ainult mõnes elemendis, muutuvad valikuliseks ja konfliktsed väärtusetüübid liidetakse |-ga.
  3. 3
    Kokkupõrke-ohutu liidesenimetamine
    Iga pesastatud objekt saab PascalCase nime, mis on tuletatud selle JSON-võtmest (snake_case, kebab-case ja tühikud normaliseeritakse kõik). Kui kaks struktuurselt erinevat objekti jagaksid sama nime, lisatakse numbriline järelliide (Data, Data2, …), selle asemel et vaikselt üle kirjutada varasemat definitsiooni.
  4. 4
    Väljund renderdatud ja allalaaditav
    Pesastatud liidesed väljastatakse esmalt, seejärel juurtüüp, vormindatuna export interface või export type'ina olenevalt sinu valikust. Tulemuse saab kopeerida lõikelauale või laadida alla .ts failina — kõik ehitatud standardse Blob'iga ja ilma serveri ida-tagasita.

Seotud tööriistad

📋

JSON-skeem vormi juurde

Kleebi JSON-skeem ja saa reaalajas töötav vorm — tekst, number, märkeruut, rippmenüü ja loendi väljad — seejärel kopeeri JSON, mida sinu sisendid toodavad. Suurepärane API päringukeha prototüüpimiseks. Töötab sinu brauseris.

Proovi järele
⌨️

Tippimiskiiruse test (WPM)

Mõõda oma trükikiirust (WPM) ja täpsust ajapõhiste, sõnapõhiste, tsitaadi-, kohandatud ja zen-testidega. Reaalajas WPM, bruto kiirus, järjepidevus, tulemuste graafik, mitu keelt ja märkide kaupa tagasiside — kõik sinu brauseris.

Proovi järele
📐

CSS clamp() generaator

Loo vedeliku CSS clamp() väärtus reageeriva tipograafia ja tühiku jaoks. Määra min/max suurus ja vaateava vahemik, vaata reaalajas eelvaadet ja kopeeri ühe rea CSS.

Proovi järele

Korduma kippuvad küsimused