JSON TypeScriptiksi
Muunna JSON TypeScript-rajapinnoiksi ja luo tyyppimäärittelyjä
JSON-syöte
TypeScript-tulos
Mikä on JSON TypeScriptiksi?
Rakennat React- tai Angular-sovellusta, sinulla on edessäsi JSON-API-vastaus, ja sinun täytyy määritellä sille TypeScript-rajapinta. Syvälle sisäkkäisen vastauksen kirjoittaminen käsin on työlästä ja virhealtista — yksi väärä tyyppi ja editorisi lakkaa havaitsemasta bugeja. Tämä työkalu päättelee TypeScript-rajapinnat suoraan JSON-rakenteestasi, joten voit liittää vastauksen ja saada käyttövalmiit tyyppimäärittelyt sekunneissa.
Liitä JSON, saat TypeScriptin. Työkalu toimii selaimessasi. Mitään ei lähetetä palvelimelle. Tuloste noudattaa vakiomuotoista TypeScript-syntaksia.
Miten työkalua käytetään
Liitä JSON
Liitä JSON vasempaan editoriin tai lataa tiedosto. Käytä Esimerkki-painiketta testidataan. Generaattori päättelee tyypit rakenteesta. Käytä edustavaa dataa, jossa näkyvät kaikki tarvitsemasi kentät.
Tarkista rajapinnat
Oikea paneeli näyttää generoidut rajapinnat. Sisäkkäisille objekteille tulee omat rajapinnat. Taulukot tyypitetään Type[] -muotoon. Valinnaiset kentät voivat käyttää ? toteutuksen mukaan.
Kopioi tai lataa
Käytä Kopioi tai Lataa tiedostona saadaksesi TypeScriptin. Liitä se projektiisi. Saatat joutua säätämään nimiä, lisäämään geneerisiä tyyppejä tai korjaamaan valinnaisia kenttiä. JSONin validointiin ensin JSON-tarkistin.
Missä JSON TypeScriptiksi auttaa
API-integraatioissa tarvitset usein tyyppejä vastauskuormalle. Liittämällä esimerkkivastauksen saat rajapinnat, jotka voit pudottaa Angular-, React- tai Node-projektiin. Asetustiedostot, webhook-kuormat ja tietokantadokumentit hyötyvät samasta. Monimutkaisten sisäkkäisten rakenteiden kirjoittaminen käsin on virhealtista; työkalu päättelee rakenteen näytteestäsi. Skeemapohjaiseen generointiin käytä JSON-schema-generaattoria ja työkaluja kuten quicktype.
Esimerkkejä JSON TypeScriptiksi
Tässä esimerkki TypeScript-rajapintojen generoinnista JSON-objektista.
Esimerkki: Tilaajatietue
JSON-syöte:
Generoitu TypeScript-tulos:
Rajoitukset
Generaattori päättelee näytteestä. Jos kenttä voi olla string | number mutta näytteessä on vain merkkijonoja, tyyppi on string. Jos taulukot voivat olla tyhjiä, alkiotyyppi voi olla unknown. Tarkista ja muokkaa tulosta. Skeemapohjaiseen generointiin käytä JSON-schema-generaattoria ja työkalua kuten quicktype.
Usein kysyttyä
Miten generoin TypeScript-rajapinnat automaattisesti JSON:sta?
Liitä JSON tähän työkaluun ja se generoi TypeScript-rajapinnat rakenteen perusteella. Sisäkkäiset objektit saavat omat rajapintansa, taulukot tyypitetään Type[]-muotoon. Kopioi tulos Angular-, React- tai Node-projektiisi.
Mitä eroa on TypeScriptin interface- ja type-määrityksellä JSON:lle?
Molemmat toimivat hyvin. interface on suositeltava, kun täytyy laajentaa tai toteuttaa; type sopii paremmin unionityypeille ja mapped typesille. Useimmissa API-vastauksen muodoissa molemmat toimivat — generaattori tuottaa oletuksena interface-määrityksen.
Lähetetäänkö dataani minnekään?
Ei. Kaikki toimii selaimessasi — JSON ei koskaan poistu laitteeltasi. Turvallinen käyttää myös tuotannon API-vastausten kanssa.
Voinko generoida tyyppejä muille kielille?
Tämä työkalu tuottaa vain TypeScriptiä. Sivustolla on muuntimet C#:lle, Javalle, Pythonille, Go:lle ja muille.
Entä valinnaiset kentät ja enumit?
Generaattori päättelee tyypit näytteestäsi. Kenttiä, jotka voisivat olla valinnaisia, ei merkitä automaattisesti ?-merkillä — tarkista tulos ja lisää ? tarvittaessa. Enumeja varten: jos kenttä käyttää johdonmukaisesti tiettyjä merkkijonoarvoja, voit korvata string:n unionilla kuten "aktiivinen" | "ei-aktiivinen".
Liittyvät työkalut
TypeScript — katso typescriptlang.org ja TypeScript-objektit. JSON — katso json.org ja MDN JSON. Skeemasta koodiin — katso quicktype. RFC 8259 (JSON-määrittely).