Siirry pääsisältöön
LibraTool logoLibraTool

JSON–TypeScript-muunnin ilmaiseksi

Luo TypeScript-käyttöliittymiä tai tyyppialiaksia mistä tahansa JSON-objektista tai -taulukosta. Liitä JSON-tiedostosi ja saat käyttövalmiit TypeScript-tyypit välittömästi.

Toimii offline-tilassa kerran ladattuna
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;
}

Yleiset käyttötavat

  • Luo TypeScript-tyypit API-vastauksistaLiitä API JSON-vastaus ja luo välittömästi TypeScript-rajapinnat turvata front-end-koodi tyypin kanssa.
  • TypeScript-tyypit Kokoonpano- ja AsetustiedostoilleLuo TypeScript-rajapinnat JSON-kokoonpanotiedostoista lisätäksesi tyyppiturvaa sovelluksen asetuksiin.
  • Luo TypeScript-tyypit TietokantatietueistaMuunna tietokantatietueet, jotka viedään JSON:ksi tai ORM-kyselyjen tulokset TypeScript-rajapinnoiksi datan kerrokseen.
  • Tyyppi Mock-tiedot ja Test-kiinnityksetLuo TypeScript-rajapinnat JSON mock-tiedoista ja test-kiinnityksistä yksikkötestien ja Storybook-tarinoiden kirjoittamiseen.
  • Tyyppi Kolmannen Osapuolen API-vastauksetLuo TypeScript-rajapinnat kolmannen osapuolen API-vastauksista, joissa viralliset tyypit puuttuvat tai ovat vanhentuneita.

Miten se toimii

Tämä työkalu käyttää käsin kirjoitettua rekursiivista tyyppipäättelyalgoritmia ilman ulkoisia kirjastoja — JSON.parse validoi ja jäsentää syötteen, ja mukautettu läpikäynti kulkee sitten jokaisen arvon JSON-puussa ja tuottaa TypeScript-interface- tai type-määrittelyjä suoraan selaimessa. Mitään ei lähetetä palvelimelle.

  1. 1
    JSON jäsennetty ja validoitu
    Syötteesi annetaan JSON.parse-funktiolle. Jos se epäonnistuu, tarkka jäsennysvirhe tuodaan esiin heti syötteen alla. Onnistunut jäsennys tuottaa tyypitetyn arvopuun, joka ohjaa loput muunnosta.
  2. 2
    Rekursiivinen tyyppipäättely
    Rekursiivinen getType-funktio kulkee jokaisen solmun läpi: primitiivit kartoittuvat string-, number-, boolean- tai null-tyypiksi; oliot laukaisevat uuden nimetyn interfacen; olio-taulukoiden avaimet yhdistetään kaikkien alkioiden yli, joten vain joissakin kohteissa esiintyvistä avaimista tulee valinnaisia ja ristiriitaiset arvotyypit yhdistetään |-merkillä.
  3. 3
    Törmäysturvallinen interface-nimeäminen
    Jokainen sisäkkäinen olio saa PascalCase-nimen, joka johdetaan sen JSON-avaimesta (snake_case, kebab-case ja välilyönnit kaikki normalisoidaan). Jos kaksi rakenteellisesti erilaista oliota jakaisi saman nimen, numeerinen jälkiliite lisätään (Data, Data2, …) sen sijaan, että aiempi määrittely hiljaa ylikirjoitettaisiin.
  4. 4
    Tuloste piirretty ja ladattavissa
    Sisäkkäiset interfacet tuotetaan ensin, sitten juuritietotyyppi, muotoiltuna joko export interface- tai export type -muotoon valintasi mukaan. Tulos voidaan kopioida leikepöydälle tai ladata .ts-tiedostona — kaikki rakennettu standardilla Blobilla ilman palvelinkierrosta.

Liittyvät työkalut

📋

JSON Schema lomakkeeksi

Liitä JSON Schema ja saat live-toimivan lomakkeen — teksti-, numero-, valintaruutu-, pudotusvalikko- ja luettelo-kentät — sitten kopioi syötteidesi tuottama JSON. Loistava API-pyyntörunkoja prototypoitaessa. Toimii selaimessasi.

Kokeile sitä
⌨️

Kirjoitusnopeustesti (WPM)

Mittaa kirjoitusnopeuttasi (WPM) ja tarkkuuttasi aika-, sanamäärä-, lainaus-, mukautetuilla ja zen-testeillä. Reaaliaikainen WPM, raakanopeus, johdonmukaisuus, tuloskäyrä, useita kieliä ja merkkikohtainen palaute — kaikki selaimessasi.

Kokeile sitä
📐

CSS clamp() -generaattori

Luo sujuva CSS clamp() -arvo responsiiviselle typografialle ja välistykselle. Aseta minimi/maksimikoko ja näyttöporttiala, katso live-esikatselu ja kopioi yksirivinen CSS.

Kokeile sitä

Usein kysytyt kysymykset