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

  1. Incolli il JSON Inserisca una risposta di esempio così com'è. Vanno bene sia un oggetto sia un array.
  2. Dia un nome al tipo radice Sarà il nome dell'interfaccia di livello superiore. Il valore predefinito basta se non ha preferenze.
  3. Esamini l'output Gli oggetti annidati compaiono estratti come interfacce a parte.
  4. Aggiunga lei i campi facoltativi Ciò che non compare nel campione non può essere dedotto. Aggiunga ? e | null dove servono.
  5. 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 User o ApiResponse. 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 ?, come name?: 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

Trascriverle a mano da una risposta di esempio richiede tempo ed espone a errori di battitura nei nomi delle chiavi e a tipi trascurati. La generazione automatica abbrevia sensibilmente il lavoro di chi sviluppa l'interfaccia utente e previene le sviste.

Le chiavi di tutti gli elementi vengono fuse e quelle presenti soltanto in alcuni diventano automaticamente proprietà facoltative, con il punto interrogativo. Se poi una stessa chiave presenta tipi diversi da un elemento all'altro, si esprime con un tipo unione, per esempio string | number.

Sono soltanto una deduzione meccanica dalla forma del JSON di esempio. Informazioni come l'ammissibilità del valore nullo o i campi che potrebbero essere aggiunti in futuro non si ricavano da un esempio: conviene quindi confrontarle con la documentazione dell'interfaccia e correggerle a mano.

Il nome dell'interfaccia di un oggetto annidato è generato automaticamente dal nome della proprietà che lo contiene: un oggetto sotto la chiave profile diventa un'interfaccia chiamata Profile. Se servono interfacce omonime ma di forma diversa, si distinguono con un numero progressivo in coda.
Tool-kun

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.