Conversione da JSON a definizioni di tipo TypeScript
Incollando un oggetto o un vettore JSON, genera automaticamente le corrispondenti definizioni di interfaccia e di tipo per TypeScript.
Generare tipi TypeScript a partire da JSON
La prima cosa che serve quando si consuma la risposta di un'API in TypeScript è una definizione di tipi. Scrivere a mano un interface scrutando un JSON profondamente annidato è faticoso, ed è proprio il genere di lavoro in cui si dimentica una proprietà o si sbaglia un tipo. Incolli qui il JSON e questo strumento genera l'interface o il type corrispondente.
Il generatore deduce i tipi TypeScript dai tipi che i valori hanno in JavaScript. Gli oggetti annidati vengono estratti come interfacce a parte e gli array assumono il tipo dei loro elementi nella forma T[]. Il nome del tipo radice è libero, cosicché l'output si incolla direttamente nel suo progetto. Poiché la deduzione poggia per intero sul campione incollato, le proprietà che possono essere omesse e i campi che possono essere nulli vanno aggiunti dopo con ? o con un'unione. Tutto viene eseguito nel suo browser.
Come generare i tipi
- Incolli il JSON Inserisca una risposta di esempio così com'è. Vanno bene sia un oggetto sia un array.
- Dia un nome al tipo radice Sarà il nome dell'interfaccia di livello superiore. Il valore predefinito basta se non ha preferenze.
- Esamini l'output Gli oggetti annidati compaiono estratti come interfacce a parte.
-
Aggiunga lei i campi facoltativi
Ciò che non compare nel campione non può essere dedotto. Aggiunga
?e| nulldove servono. -
Lo copi nel suo progetto
Il risultato si incolla direttamente in un file
.ts.
Consigli per sfruttarlo al meglio
- Se tutti gli elementi di un vettore sono oggetti, le loro chiavi vengono fuse in un'unica interfaccia; le chiavi assenti in qualche elemento diventano automaticamente facoltative, con il punto interrogativo.
- Il nome del tipo radice, inizialmente «Root», si può cambiare a piacere, per esempio in
UseroApiResponse. I nomi delle interfacce degli oggetti annidati sono generati automaticamente dal nome della proprietà. - Incollando senz'altro un JSON di esempio preso da una risposta reale, otterrete in un attimo una prima stesura delle definizioni di tipo da usare nell'interfaccia utente.
- Ciò che si ottiene è soltanto una bozza dedotta dalla forma dei dati: conviene confrontarla con le specifiche reali dell'interfaccia — campi annullabili, campi obbligatori — e correggerla a mano.
Quando torna utile
Tipizzare un'API esterna
Anche quando un'API non pubblica definizioni di tipi, una risposta di esempio offre un punto di partenza.
Tipizzare un file di configurazione JSON esistente
Volendo leggere una configurazione in sicurezza di tipo, la struttura si travasa direttamente in un tipo.
Ricavare tipi da dati fittizi
Costruendo prima l'interfaccia, può ricavare i tipi da dati provvisori.
Controllare un tipo scritto a mano
Confronti un tipo che ha scritto lei con quello generato per trovare ciò che manca.
I termini di TypeScript spiegati
- interface
- Una dichiarazione che descrive la forma di un oggetto. Dichiarare più volte lo stesso nome le fonde da sé, ed è questo a distinguerla da un alias di tipo.
- Alias di tipo
- Una dichiarazione che dà un nome a qualsiasi tipo. Può nominare anche unioni e tipi primitivi, cosa che un'interfaccia non consente.
- Proprietà facoltativa
- Un campo contrassegnato da
?, comename?: string. Si aggiunge automaticamente alle chiavi presenti solo in alcuni elementi di un array, ma da un singolo oggetto non si può dedurre se un campo sia facoltativo. - Tipo unione
- Un tipo come
string | null, che esprime che un valore può essere uno fra più tipi. - Oggetto annidato
- Una struttura il cui valore è a sua volta un oggetto. Questo strumento lo estrae come interfaccia a parte.
- Inferenza di tipo
- Ricavare un tipo da un valore. L'inferenza qui poggia sull'unico campione incollato, che non è necessariamente la specifica reale dell'API.
Domande frequenti
string | number.profile diventa un'interfaccia chiamata Profile. Se servono interfacce omonime ma di forma diversa, si distinguono con un numero progressivo in coda.
A proposito — il problema dello scarto fra i tipi che gli strumenti di deduzione risolvono
TypeScript permette di scoprire i difetti già in fase di compilazione grazie alla tipizzazione statica, ma il compilatore non può conoscere il tipo dei dati JSON che arrivano da un'interfaccia esterna se non lo si definisce a mano. Ogni volta che la documentazione e la risposta reale divergono, o che un campo viene aggiunto o rimosso, occorre aggiornare le definizioni: questo scarto fra i tipi dichiarati e la realtà dell'interfaccia è da sempre un cruccio di molti progetti.
Gli strumenti che convertono il JSON in TypeScript rendono il lavoro assai più spedito, ricavando meccanicamente i tipi dalla risposta ricevuta. Fra quelli dello stesso genere è celebre quicktype, uno strumento libero che genera definizioni per più linguaggi ed è noto per la sua realizzazione ricca, capace di accettare anche schemi JSON o GraphQL.
La difficoltà della deduzione dei tipi sta nel fatto che il JSON in sé non porta con sé informazioni come «questo campo è sempre presente» o «potrà diventare nullo». Le definizioni generate non sono quindi infallibili: vanno considerate una bozza che riflette la struttura dei dati di quel particolare esempio e vanno corrette confrontandole con le specifiche reali dell'interfaccia.