JSON → TypeScript konverter

Illessz be egy API-választ, és használatra kész TypeScript interfészeket vagy type aliasokat kapsz, automatikusan kikövetkeztetett beágyazott típusokkal, opcionális mezőkkel és null uniókkal.

A böngésződben futNincs regisztrációNincs feltöltés

TypeScript

Hogyan használd: JSON → TypeScript

  1. Illessz be egy JSON mintát, például egy API-választ, a bal oldali mezőbe, vagy nyiss meg egy .json fájlt.
  2. Add meg a gyökértípus nevét (például User vagy ApiResponse).
  3. Válassz interface vagy type deklarációt, és kapcsold be/ki az export, a readonly vagy a mind opcionális mezők beállítást.
  4. Válaszd az unknown (biztonságosabb) vagy az any típust azokhoz az értékekhez, amelyeket a minta nem árul el, például üres tömbökhöz és null értékekhez.
  5. Másold ki a generált kódot, vagy töltsd le .ts fájlként.

Hogyan következtetjük ki a típusokat?

  • Primitívek: a stringek, számok és logikai értékek string, number és boolean típust kapnak.
  • A beágyazott objektumok saját, PascalCase nevű interfészt kapnak, így a billing_address ebből lesz: BillingAddress.
  • Az objektumtömbök egyetlen, egyes számú nevű elemtípusba olvadnak össze: a users eredménye User[]. Az egyes elemekből hiányzó kulcs opcionális lesz (key?:).
  • A null értékek összeadódnak az adott kulcsnál látott többi értékkel: string | null. Az a kulcs, amely mindig csak null, unknown vagy any típust kap.
  • A vegyes tömbökből unió tömbök lesznek, például (number | string)[].
  • Az azonos alakzatokat egyszer deklaráljuk és újrahasznosítjuk, az azonos nevet kapó eltérő alakzatok pedig számképzőt kapnak.
  • A nem érvényes azonosító kulcsok, például a "first-name" vagy a "2fa", idézőjelbe kerülnek.

interface vagy type

Egyszerű objektumalakzatokhoz a kettő szinte felcserélhető. Az interface deklarációk kiterjeszthetők és összevonhatók, és kicsit érthetőbb fordítási hibákat adnak. A type aliasok uniókat és mapped type-okat is ki tudnak fejezni. Sok csapat interfészeket használ az API-modellekhez, minden máshoz pedig típusokat; azt válaszd, amit a kódbázisod vagy a lintered (@typescript-eslint/consistent-type-definitions) elvár.

Jobb típusok a mintából

A típusok csak annyira lehetnek teljesek, mint a minta. Olyan választ illessz be, amely tartalmazza az opcionális mezőket is, vagy egy több, változatos elemet tartalmazó tömböt, hogy a generátor felismerje az opcionális és nullable kulcsokat. Az olyan értékek, mint a dátumok és az enumok, a JSON-ban egyszerű stringként érkeznek; ezeket utólag szűkítsd kézzel, például status: 'active' | 'disabled'. Futásidejű validáláshoz párosítsd a generált típusokat egy sémakönyvtárral, például a Zoddal.

Gyakran ismételt kérdések

Feltöltődik a JSON-om?
Nem. A típusokat JavaScript generálja a böngésződben. A tokeneket vagy személyes adatokat tartalmazó API-válaszok sosem hagyják el az eszközödet.
Hogyan ismeri fel az opcionális tulajdonságokat?
Ha ugyanannak a tömbnek az objektumai eltérő kulcsokkal rendelkeznek, a legalább egy objektumból hiányzó kulcsok ? jellel opcionálisként jelölődnek. Egyetlen objektum esetén minden kulcs kötelező, hacsak nem jelölöd be a Mind opcionális opciót.
Az <code>unknown</code> vagy az <code>any</code> típust használjam?
Az unknown biztonságosabb: a TypeScript megköveteli, hogy használat előtt szűkítsd az értéket. Az any kikapcsolja a típusellenőrzést az adott értékre. Csak akkor használd, ha később pontosítani akarod a típusokat.
Miért <code>string</code> típusú egy ISO dátum?
A JSON-ban nincs dátumtípus, ezért a dátumok stringként utaznak. Ha feldolgozás után new Date() segítségével alakítod át őket, a modelledben változtasd a tulajdonságot Date típusúra.
Megbirkózik a nagy vagy mélyen beágyazott JSON-nal?
Igen. A generálás a bemenet méretével lineáris, és helyben fut, így a több megabájtos válaszok is jóval egy másodperc alatt konvertálódnak.

Kapcsolódó eszközök

JSON formázó JSON formázás, minifikálás és validálás sor/oszlop pontos hibákkal. JSON Diff Két JSON objektum összevetése, változások útvonal szerint. YAML → JSON YAML konfigurációk JSON-ná alakítása, több dokumentummal, pontos hibákkal. cURL konverter curl parancsokból fetch, Axios, Python, Go vagy PHP kód.