Convertitore da JSON a TypeScript

Incolla una risposta API e ottieni interface o alias di tipo TypeScript pronti all'uso, con tipi annidati, campi opzionali e unioni con null dedotti automaticamente.

Funziona nel browserNessuna registrazioneNessun caricamento

TypeScript

Come usare JSON to TypeScript

  1. Incolla un esempio JSON, ad esempio una risposta API, nel riquadro di sinistra oppure apri un file .json.
  2. Imposta il nome del tipo radice (ad esempio User o ApiResponse).
  3. Scegli dichiarazioni interface o type e attiva o disattiva export, readonly o tutti i campi opzionali.
  4. Scegli unknown (più sicuro) o any per i valori che l'esempio non permette di dedurre, come array vuoti e null.
  5. Copia il codice generato o scaricalo come file .ts.

Come vengono dedotti i tipi

  • Tipi primitivi: stringhe, numeri e booleani diventano string, number e boolean.
  • Oggetti annidati diventano interface con un proprio nome in PascalCase, quindi billing_address diventa BillingAddress.
  • Array di oggetti vengono uniti in un unico tipo di elemento, con il nome al singolare: users produce User[]. Una chiave assente in alcuni elementi diventa opzionale (key?:).
  • Valori null si combinano con gli altri valori visti per quella chiave: string | null. Una chiave che è sempre e solo null ricade su unknown o any.
  • Array misti diventano array di unioni come (number | string)[].
  • Strutture identiche vengono dichiarate una sola volta e riutilizzate, mentre strutture diverse che condividerebbero un nome ricevono un suffisso numerico.
  • Chiavi che non sono identificatori validi, come "first-name" o "2fa", vengono messe tra virgolette.

interface o type

Per semplici forme di oggetti i due sono quasi intercambiabili. Le dichiarazioni interface possono essere estese e unite e producono errori del compilatore un po' più chiari. Gli alias type possono esprimere anche unioni e mapped type. Molti team usano le interface per i modelli delle API e i type per tutto il resto; scegli quello che si aspettano la tua codebase o il tuo linter (@typescript-eslint/consistent-type-definitions).

Tipi migliori dal tuo esempio

I tipi possono essere completi solo quanto l'esempio. Incolla una risposta che includa i campi opzionali, o un array con diversi elementi vari, così il generatore può individuare le chiavi opzionali e nullable. Valori come date ed enum arrivano in JSON come semplici stringhe; restringili a mano in seguito, ad esempio status: 'active' | 'disabled'. Per la validazione a runtime, abbina i tipi generati a una libreria di schema come Zod.

Domande frequenti

Il mio JSON viene caricato?
No. I tipi vengono generati da JavaScript nel tuo browser. Le risposte API che contengono token o dati personali non lasciano mai il tuo dispositivo.
Come vengono rilevate le proprietà opzionali?
Quando gli oggetti dello stesso array hanno chiavi diverse, quelle assenti in almeno un oggetto vengono segnate come opzionali con ?. Con un solo oggetto tutte le chiavi sono obbligatorie, a meno che tu non spunti Tutto opzionale.
Meglio usare <code>unknown</code> o <code>any</code>?
unknown è più sicuro: TypeScript ti obbliga a restringere il valore prima di usarlo. any disattiva il controllo dei tipi per quel valore. Usalo solo se intendi raffinare i tipi in seguito.
Perché una data ISO è tipizzata come <code>string</code>?
JSON non ha un tipo data, quindi le date viaggiano come stringhe. Se le converti con new Date() dopo il parsing, cambia la proprietà in Date nel tuo modello.
Gestisce JSON grandi o molto annidati?
Sì. La generazione è lineare rispetto alla dimensione dell'input e gira in locale, quindi risposte di diversi megabyte vengono convertite in molto meno di un secondo.

Strumenti correlati

JSON Formatter Formatta, minifica e valida JSON con errori per riga/colonna. JSON Diff Confronta due oggetti JSON ed elenca le modifiche per percorso. YAML to JSON Converti configurazioni YAML in JSON, con supporto multi-documento ed errori precisi. Convertitore cURL Trasforma comandi curl in codice fetch, Axios, Python, Go o PHP.