tigtools

JSON to TypeScript

Lipește un răspuns sau un fișier JSON și obține declarații TypeScript pe care le poți folosi direct în cod.

Rulează în browser Fără înregistrare

Declară ca

Cum se folosește

  1. Lipește JSON în caseta de introducere, deschide un fișier .json sau încearcă exemplul.
  2. Setează numele tipului rădăcină, de exemplu Order sau ApiResponse.
  3. Alege declarații interface sau type și dacă să adaugi export și readonly.
  4. Copiază TypeScript-ul generat sau descarcă-l ca types.ts.

Cum funcționează

Generatorul parcurge întregul document JSON și înregistrează tipurile de valori găsite în fiecare loc. Fiecare obiect JSON devine o declarație cu nume propriu. Numele provine din cheia proprietății scrisă în PascalCase, astfel încât „shipping_address” devine ShippingAddress. Elementele unui array sunt denumite după forma de singular a cheii: „items” dă Item, „categories” dă Category, iar cheile care nu par plurale primesc sufixul „Item”.

Toate obiectele dintr-un array sunt reunite într-o singură interfață. Dacă o cheie apare doar în unele dintre ele, este marcată ca opțională cu „?”. Dacă o valoare are tipuri diferite în locuri diferite, tipul este o uniune, de exemplu string | number. null este păstrat ca tip propriu, astfel încât un câmp care uneori este null devine string | null. Un array gol devine unknown[], pentru că nu există nimic din care să se deducă. Două obiecte cu exact aceleași proprietăți și tipuri folosesc aceeași interfață în loc să producă duplicate. Cheile care nu sunt identificatori valizi, cum ar fi „first-name”, sunt puse între ghilimele.

Rezultatul descrie doar eșantionul pe care îl lipiți. Un câmp care în realitate este opțional sau poate fi null va fi obligatoriu și non-null dacă eșantionul nu arată acest lucru, iar datele devin simple șiruri de caractere. Verificați tipurile în raport cu documentația API înainte de a vă baza pe ele.

Exemple

Tipizarea unui răspuns API

Lipiți o comandă din API-ul magazinului cu numele rădăcină Order. Obțineți interfețele Order, Customer, Item și Shipping, cu note?: string pe Item pentru că doar unul dintre cele două articole are o notă.

Configurare read-only

Lipiți un config.json, bifați „Faceți proprietățile readonly” și lipiți rezultatul în config.d.ts, astfel încât scrierile accidentale în config să fie prinse de compilator.

Array la nivelul superior

Un endpoint de listă returnează [{…}, {…}]. Cu numele rădăcină Product, rezultatul începe cu „export type Product = ProductItem[];”, urmat de interfața ProductItem.

Întrebări frecvente

De ce este un câmp opțional în rezultat?

Pentru că cel puțin un obiect din același array nu are cheia respectivă. Dacă toate obiectele o au, câmpul devine obligatoriu. Lipește mai multe înregistrări pentru câmpuri opționale mai precise.

De ce este o dată tipizată ca string?

JSON nu are un tip de dată, așa că datele apar ca stringuri. Generatorul nu ghicește formatele. Schimbă singur tipul dacă în cod le convertești în obiecte Date.

Care este diferența dintre interface și type?

Pentru forma obiectelor funcționează aproape la fel. Interfețele pot fi extinse și îmbinate prin declarații ulterioare; aliasurile de tip nu pot fi redeschise. Alege stilul deja folosit în baza ta de cod.

Poate genera validare la runtime, cum ar fi scheme Zod?

Nu. Generează doar declarații TypeScript, care sunt verificate la compilare și nu validează datele la runtime.

Confidențialitate

JSON-ul tău este analizat doar în browserul tău. Nimic nu este încărcat, stocat sau inclus în analize.