Da JSON a TypeScript
Trasforma un documento JSON di esempio in interfacce o alias di tipo TypeScript, con campi opzionali e unioni ricavati dai tuoi dati.
Funziona interamente nel tuo browser
I tipi sono dedotti dall'esempio che incolli, quindi descrivono quell'esempio e non uno schema: un campo che è una stringa nel tuo esempio può essere un numero altrove. I numeri sono tutti number e le date restano string. L'ordine delle proprietà segue JSON.parse, che elenca per prime le chiavi numeriche intere.
Come generare TypeScript da JSON
- Incolla nella casella una risposta o un file JSON. Più elementi in un array migliorano il risultato, perché i campi assenti in alcuni elementi diventano opzionali.
- Imposta il nome del tipo principale, scegli
interfaceotypee spunta export, readonly o il rilevamento dei campi opzionali secondo necessità. - Copia le dichiarazioni o scaricale come file
.ts. Controlla i nomi, perché derivano dai nomi delle tue chiavi.
Dedurre i tipi da un esempio JSON
I tipi TypeScript descrivono la forma dei dati, e una risposta JSON contiene già una forma: ogni chiave, il tipo di valore che c'è dietro e come si annidano gli oggetti. Un convertitore percorre l'esempio e annota quella forma sotto forma di dichiarazioni, così non devi scrivere a mano quaranta campi prima di poter chiamare un'API con sicurezza.
Il passaggio che conta di più è cosa fare con gli array. Ogni elemento di un array di oggetti viene letto e le loro forme vengono unite: una chiave presente in ogni elemento resta obbligatoria, una chiave presente solo in alcuni diventa opzionale e i valori di natura diversa diventano un'unione. Per questo un esempio con più record dà tipi molto migliori di uno con un solo record. Un valore null è trattato in modo diverso da una chiave mancante, perché i due casi significano cose diverse per il codice che legge il campo.
I tipi dedotti sono un punto di partenza, non un contratto. Non possono sapere che una stringa è sempre uno di tre valori, che un numero è in realtà un ID intero o che un campo presente in tutti i tuoi esempi può sparire in produzione. Leggi il risultato, rinomina ciò che è venuto fuori in modo goffo e rendi più stretti i tipi che contano.
Suggerimenti
- Verifica prima che l'esempio sia ben formato con Formatta e valida JSON, che indica il carattere esatto di un errore di sintassi.
- Lavori invece con una configurazione YAML? Convertila con Da YAML a JSON e incolla qui il risultato.
- Devi guardare dentro il payload di un token prima di scrivere i tipi? Decodificalo con il Decodificatore JWT.
Domande frequenti
Come decide che un campo è opzionale?
Quando hai un array di oggetti, gli oggetti vengono uniti in un'unica forma. Una chiave presente in alcuni elementi ma non in tutti riceve un ?. Una chiave presente ma con null in alcuni elementi non è opzionale; diventa T | null. Disattiva il rilevamento dei campi opzionali se preferisci avere ogni chiave segnata come obbligatoria.
Come vengono nominati i tipi annidati?
Ogni oggetto annidato prende il nome dalla sua chiave in PascalCase, quindi billing_address diventa BillingAddress. Per un array, il tipo dell'elemento toglie una "s" finale quando la chiave è più lunga di 3 lettere e non termina in ss, us o is: users dà User, mentre address dà AddressItem. Se due forme diverse vogliono lo stesso nome, la seconda viene numerata, dando User e User2.
Che succede agli oggetti con la stessa forma?
Condividono un'unica dichiarazione. Se billing e shipping contengono entrambi { street, city }, ottieni una sola interfaccia, col nome del primo punto in cui compare. Due oggetti con le stesse chiavi ma con tipi di valore diversi sono forme diverse e ricevono nomi separati.
Perché un array vuoto è tipizzato come unknown[]?
Un array vuoto non contiene esempi, quindi non si può dedurre nulla sui suoi elementi. unknown[] è la risposta onesta; cambiala a mano quando conosci il tipo degli elementi. Un array che mescola valori diventa un'unione, come (string | number)[].
L'output può differire dall'API reale?
Sì. Un esempio mostra solo i valori che contiene. Un campo sempre presente nel tuo esempio ma a volte assente in produzione qui sarà obbligatorio, e una stringa simile a un enum sarà semplicemente string. Per una validazione rigorosa usa uno schema; per partire in fretta usa questo output e correggilo.
Il mio JSON viene caricato?
No. Nulla di ciò che incolli viene inviato altrove; la conversione avviene nel tuo browser e puoi anche scollegarti dalla rete dopo il caricamento della pagina.