JSON → TypeScript -muunnin

Liitä API-vastaus ja saat käyttövalmiit TypeScript-interfacet tai tyyppialiakset, joissa sisäkkäiset tyypit, valinnaiset kentät ja null-unionit on päätelty puolestasi.

Toimii selaimessaEi rekisteröitymistäMitään ei lähetetä

TypeScript

Näin käytät työkalua: JSON → TypeScript

  1. Liitä JSON-esimerkki, kuten API-vastaus, vasempaan kenttään tai avaa .json-tiedosto.
  2. Aseta juurityypin nimi (esimerkiksi User tai ApiResponse).
  3. Valitse interface- tai type-määrittelyt ja kytke päälle export, readonly tai kaikki kentät valinnaisiksi.
  4. Valitse unknown (turvallisempi) tai any arvoille, joita esimerkistä ei voi päätellä, kuten tyhjille taulukoille ja null-arvoille.
  5. Kopioi luotu koodi tai lataa se .ts-tiedostona.

Miten tyypit päätellään

  • Primitiivit: merkkijonot, numerot ja totuusarvot vastaavat tyyppejä string, number ja boolean.
  • Sisäkkäisistä objekteista tulee omia nimettyjä interfaceja PascalCase-muodossa, joten billing_address muuttuu muotoon BillingAddress.
  • Objektitaulukot yhdistetään yhdeksi alkiotyypiksi, joka nimetään yksikössä: users tuottaa User[]. Avain, joka puuttuu joistakin alkioista, muuttuu valinnaiseksi (key?:).
  • Null-arvot yhdistetään avaimen muihin havaittuihin arvoihin: string | null. Avain, joka on aina null, saa tyypin unknown tai any.
  • Sekataulukoista tulee unionitaulukoita, kuten (number | string)[].
  • Identtiset rakenteet määritellään kerran ja käytetään uudelleen, ja erilaiset rakenteet, jotka saisivat saman nimen, saavat numeropäätteen.
  • Avaimet, jotka eivät ole kelvollisia tunnisteita, kuten "first-name" tai "2fa", laitetaan lainausmerkkeihin.

interface vs. type

Tavallisille objektirakenteille nämä ovat lähes vaihdettavissa. interface-määrittelyjä voi laajentaa ja yhdistää, ja ne antavat hieman selkeämpiä kääntäjävirheitä. type-aliakset voivat ilmaista myös unioneita ja mapped typejä. Monet tiimit käyttävät interfaceja API-malleihin ja typejä kaikkeen muuhun; valitse se, mitä koodikantasi tai linterisi (@typescript-eslint/consistent-type-definitions) odottaa.

Paremmat tyypit esimerkistä

Tyypit voivat olla vain niin kattavia kuin esimerkki. Liitä vastaus, joka sisältää valinnaiset kentät, tai taulukko, jossa on useita erilaisia alkioita, jotta generaattori tunnistaa valinnaiset ja nullable-avaimet. Arvot kuten päivämäärät ja enumit tulevat JSONissa tavallisina merkkijonoina; tarkenna ne käsin jälkikäteen, esimerkiksi status: 'active' | 'disabled'. Ajonaikaista validointia varten yhdistä luodut tyypit skeemakirjastoon, kuten Zodiin.

Usein kysytyt kysymykset

Lähetetäänkö JSONini jonnekin?
Ei. Tyypit luodaan JavaScriptillä selaimessasi. Tokeneita tai henkilötietoja sisältävät API-vastaukset eivät koskaan poistu laitteeltasi.
Miten valinnaiset ominaisuudet tunnistetaan?
Kun saman taulukon objekteilla on eri avaimet, vähintään yhdestä objektista puuttuvat avaimet merkitään valinnaisiksi merkillä ?. Yksittäisessä objektissa jokainen avain on pakollinen, ellet valitse Kaikki valinnaisia.
Kannattaako käyttää <code>unknown</code> vai <code>any</code>?
unknown on turvallisempi: TypeScript pakottaa tarkentamaan arvon ennen käyttöä. any kytkee tyyppitarkistuksen pois kyseiseltä arvolta. Käytä sitä vain, jos aiot tarkentaa tyypit myöhemmin.
Miksi ISO-päivämäärän tyyppi on <code>string</code>?
JSONissa ei ole päivämäärätyyppiä, joten päivämäärät siirretään merkkijonoina. Jos muunnat ne jäsennyksen jälkeen new Date()-kutsulla, vaihda ominaisuuden tyypiksi mallissasi Date.
Selviääkö se suurista tai syvästi sisäkkäisistä JSONeista?
Kyllä. Luonti on lineaarinen syötteen kokoon nähden ja tapahtuu paikallisesti, joten usean megatavun vastaukset muunnetaan selvästi alle sekunnissa.

Aiheeseen liittyvät työkalut

JSON-muotoilija Muotoile, pienennä ja validoi JSON rivi- ja saraketarkoin virhein. JSON Diff Vertaa kahta JSON-objektia ja listaa muutokset polun mukaan. YAML → JSON Muunna YAML-asetukset JSONiksi, monidokumenttituki ja tarkat virheet. cURL-muunnin Muunna curl-komennot fetch-, Axios-, Python-, Go- tai PHP-koodiksi.