Miksi muuntaa JSON TypeScriptiksi?

TypeScript käyttää staattisia tyyppejä bugien havaitsemiseen käännösaikana ajonaikaisen tarkistuksen sijaan. Kun työskentelet API:en, konfiguraatiotiedostojen tai muiden ulkoisten tietolähteiden kanssa, jotka palauttavat JSON-dataa, sinun täytyy yleensä määritellä tyypit tai rajapinnat, jotka kuvaavat datan rakennetta. Näiden määrittelyjen kirjoittaminen käsin on työlästä ja virhealtista, erityisesti syvästi sisäkkäisten objektien tai laajojen taulukoiden kohdalla, joissa rakenteet vaihtelevat. Muunnoksen automatisointi säästää aikaa ja vähentää riskiä, että tyyppisi eivät vastaa todellista dataa.

Työkalun kuvaus

Tämä työkalu ottaa minkä tahansa kelvollisen JSON-syötteen — objektit, taulukot tai sisäkkäiset rakenteet — ja luo välittömästi vastaavat TypeScript-tyyppialiaset tai rajapinnat. Se tunnistaa automaattisesti sisäkkäiset objektit, luo kullekin erilliset nimetyt tyypit ja käsittelee taulukot päättelemällä elementtien tyypit. Voit vaihtaa interface- ja type-tulostustilojen välillä projektisi käytäntöjen mukaan.

Esimerkit

JSON-syöte:

{
  "id": 1,
  "name": "Alice",
  "email": "alice@example.com",
  "address": {
    "street": "123 Main St",
    "city": "Springfield",
    "zip": "62701"
  },
  "roles": ["admin", "editor"]
}

Tuloste (Interface-tila):

interface RootObject {
  id: number;
  name: string;
  email: string;
  address: Address;
  roles: string[];
}

interface Address {
  street: string;
  city: string;
  zip: string;
}

Tuloste (Type-tila):

type RootObject = {
  id: number;
  name: string;
  email: string;
  address: Address;
  roles: string[];
};

type Address = {
  street: string;
  city: string;
  zip: string;
};

Ominaisuudet

  • Valitse interface- tai type-aliastuloste yhdellä pudotusvalikolla
  • Sisäkkäisten objektityyppien automaattinen tunnistus ja erottelu
  • Taulukon elementtityypin päättely, mukaan lukien objektitaulukot
  • Yhdistää taulukoiden vaihtelevat objektirakenteet yhdeksi yhtenäiseksi tyypiksi valinnaisilla kentillä
  • Reaaliaikainen muunnos syntaksikorostetulla JSON- ja TypeScript-editorilla

Käyttötapaukset

  • TypeScript-tyyppien nopea määrittely API-vastausten datalle frontend-kehityksen aikana
  • Tyyppimäärittelyjen luominen JSON-konfiguraatiotiedostoista tai tietokantavienneistä
  • Tyyppiturvattujen datamallien alustaminen uutta TypeScript-projektia aloitettaessa

Toimintaperiaate

Työkalu jäsentää kelvollisen JSON:in ja käy rekursiivisesti läpi sen rakenteen. Jokaisesta kohtaamastaan objektista se luo nimetyn rajapinnan tai tyyppialiasen, jonka kentät vastaavat objektin avaimia. Sisäkkäiset objektit tuottavat lisätyyppejä, joihin viitataan nimellä. Taulukot analysoidaan elementtityypin määrittämiseksi — jos kaikki elementit ovat objekteja, niiden rakenteet yhdistetään yhdeksi tyypiksi, jossa avaimet, joita ei esiinny jokaisessa elementissä, merkitään valinnaisiksi.

Vinkit

  • Liitä edustava näyte JSON-datastasi. Mitä kattavampi näyte, sitä tarkempia luodut tyypit ovat.
  • Taulukoille, joissa on erilaisilla rakenteilla olevia objekteja, sisällytä useita objekteja, jotta työkalu voi tunnistaa valinnaiset kentät.
  • Käytä Type-tilaa, jos projektissasi suositaan tyyppialiasten käyttöä objektirakenteille, tai Interface-tilaa, jos noudatat rajapintakäytäntöä.