Convertor JSON în TypeScript

Lipește un răspuns API și primești interfețe TypeScript sau aliasuri de tip gata de folosit, cu tipuri imbricate, câmpuri opționale și uniuni cu null deduse pentru tine.

Rulează în browserFără înregistrareNimic nu este încărcat

TypeScript

Cum se folosește: JSON în TypeScript

  1. Lipește un exemplu JSON, cum ar fi un răspuns API, în caseta din stânga sau deschide un fișier .json.
  2. Setează numele tipului rădăcină (de exemplu User sau ApiResponse).
  3. Alege declarații interface sau type și activează export, readonly sau câmpuri toate opționale.
  4. Alege unknown (mai sigur) sau any pentru valorile pe care exemplul nu le poate dezvălui, cum ar fi array-urile goale și null.
  5. Copiază codul generat sau descarcă-l ca fișier .ts.

Cum sunt deduse tipurile

  • Primitive: șirurile, numerele și valorile booleene se mapează la string, number și boolean.
  • Obiectele imbricate devin interfețe proprii denumite în PascalCase, așa că billing_address devine BillingAddress.
  • Array-urile de obiecte sunt combinate într-un singur tip de element, denumit la singular: users dă User[]. O cheie care lipsește din unele elemente devine opțională (key?:).
  • Valorile null se combină cu celelalte valori văzute pentru acea cheie: string | null. O cheie care este mereu null devine unknown sau any.
  • Array-urile mixte devin array-uri de uniuni precum (number | string)[].
  • Formele identice sunt declarate o singură dată și refolosite, iar formele diferite care ar avea același nume primesc un sufix numeric.
  • Cheile care nu sunt identificatori valizi, precum "first-name" sau "2fa", sunt puse între ghilimele.

interface vs. type

Pentru forme simple de obiecte, cele două sunt aproape interschimbabile. Declarațiile interface pot fi extinse și combinate și dau erori de compilator puțin mai clare. Aliasurile type pot exprima și uniuni și tipuri mapate. Multe echipe folosesc interfețe pentru modelele API și tipuri pentru restul; alege ce așteaptă codul sau linter-ul tău (@typescript-eslint/consistent-type-definitions).

Tipuri mai bune din exemplul tău

Tipurile pot fi doar atât de complete cât este exemplul. Lipește un răspuns care include câmpuri opționale sau un array cu mai multe elemente variate, ca generatorul să poată detecta cheile opționale și nullable. Valori precum datele și enum-urile ajung în JSON ca șiruri simple; restrânge-le manual ulterior, de exemplu status: 'active' | 'disabled'. Pentru validare la runtime, combină tipurile generate cu o bibliotecă de scheme precum Zod.

Întrebări frecvente

Este JSON-ul meu încărcat?
Nu. Tipurile sunt generate de JavaScript în browser. Răspunsurile API care conțin tokenuri sau date personale nu părăsesc niciodată dispozitivul tău.
Cum sunt detectate proprietățile opționale?
Când obiectele din același array au chei diferite, cheile care lipsesc din cel puțin un obiect sunt marcate opționale cu ?. Cu un singur obiect, fiecare cheie este obligatorie, dacă nu bifezi Toate opționale.
Ar trebui să folosesc <code>unknown</code> sau <code>any</code>?
unknown este mai sigur: TypeScript te obligă să restrângi valoarea înainte de a o folosi. any dezactivează verificarea tipurilor pentru acea valoare. Folosește-l doar dacă plănuiești să rafinezi tipurile mai târziu.
De ce o dată ISO are tipul <code>string</code>?
JSON nu are tip pentru date, așa că datele circulă ca șiruri. Dacă le convertești cu new Date() după parsare, schimbă tipul proprietății în Date în modelul tău.
Poate gestiona JSON mare sau adânc imbricat?
Da. Generarea este liniară în raport cu dimensiunea intrării și rulează local, așa că răspunsurile de mai mulți megaocteți se convertesc în mult sub o secundă.

Instrumente similare

Formatter JSON Formatează, minifică și validează JSON cu erori pe linie/coloană. JSON Diff Compară două obiecte JSON și listează modificările după cale. YAML în JSON Convertește configurații YAML în JSON, cu suport multi-document și erori precise. Convertor cURL Transformă comenzi curl în cod fetch, Axios, Python, Go sau PHP.