JSON in Interfaccia TypeScript

JSON in Interfaccia TypeScript

Converti istantaneamente qualsiasi oggetto JSON in interfacce TypeScript pulite. Strumento online gratuito — supporta oggetti annidati, array e campi opzionali.

Aggiornato aprile 2026

Revisionato da Rafael Duarte

Nome dell'interfaccia radice
Output
1
Interfaccia TypeScript

// Incolla il JSON a sinistra // per generare le interfacce TypeScript

Shift + Enter per copiare

Come convertire JSON in interfacce TypeScript

Dalla risposta di un'API ai tipi pronti per il tuo progetto

1. Incolla il JSON

Una risposta di un'API, un file di configurazione o un record del database: serve un oggetto oppure un array di oggetti.

2. Dai un nome al tipo radice

Il nome predefinito è RootObject: sostituiscilo con qualcosa del tuo dominio, come Utente o Ordine, e scegli tra interface e type.

3. Copia il risultato

Le dichiarazioni si aggiornano mentre scrivi. Copiale con il pulsante oppure con Shift+Invio e incollale nei tuoi file .ts o .tsx.

Cosa fa il generatore di interfacce TypeScript

Inferenza dei tipi a partire da un JSON di esempio

Oggetti annidati

Ogni oggetto interno diventa un'interfaccia separata, con il nome della chiave convertito in PascalCase: indirizzo_spedizione diventa IndirizzoSpedizione.

Array tipizzati

Gli array di primitivi diventano string[] o number[]; quelli con tipi misti un'unione come (string | number)[]; quelli di oggetti un'interfaccia dedicata seguita da [].

`interface` o `type`

Un selettore cambia l'output tra dichiarazioni interface e alias type, per seguire la convenzione del tuo progetto.

Riparazione del JSON non valido

Se il JSON ha un errore, vedi il messaggio con riga e colonna quando il browser le fornisce. Il pulsante Fix usa la libreria jsonrepair per sistemare virgole in eccesso, apici mancanti e parentesi non chiuse.

Array di oggetti alla radice

Puoi incollare direttamente un elenco restituito da un'API: lo strumento combina tutti gli oggetti dell'array per il tipo radice e rende opzionali (?) i campi che mancano in alcuni.

Evidenziazione della sintassi

Parole chiave, tipi primitivi, nomi dei tipi e campi hanno colori diversi, così rivedi un'interfaccia lunga prima di incollarla nell'editor.

Esempi di conversione da JSON a TypeScript

Output generato con il nome radice predefinito RootObject

JSON
TypeScript generato
{"nome": "Giulia", "eta": 34, "attivo": true}
interface RootObject { nome: string; eta: number; attivo: boolean; }
{"tag": ["a", 1, null]}
tag: (string | number | null)[];
{"indirizzo_spedizione": {"citta": "Milano"}}
indirizzo_spedizione: IndirizzoSpedizione; (+ interface IndirizzoSpedizione)
{"ordini": [{"id": 1}]}
ordini: Ordini[]; (+ interface Ordini { id: number; })
{"allegati": []}
allegati: unknown[];

Quando generare tipi TypeScript da un JSON

Gli scenari più frequenti nel lavoro quotidiano

Tipizzare le risposte di un'API REST

Copia il JSON dalla scheda Rete del browser o da Postman e ottieni le interfacce da usare con fetch o axios.

Integrare un servizio di terze parti

Parti da una risposta di esempio di un gateway di pagamento o di un servizio di spedizioni per avere una prima bozza dei tipi.

Tipizzare un file di configurazione

Converti un config.json in un'interfaccia e ottieni l'autocompletamento delle chiavi nell'editor.

Migrare un progetto da JavaScript a TypeScript

Genera i tipi dei payload che il codice esistente già gestisce, invece di scriverli a mano campo per campo.

Prototipare una funzionalità

Con la struttura tipizzata pronta in pochi secondi, l'editor ti suggerisce i campi mentre scrivi la logica.

Errori comuni da evitare

Il tipo generato descrive solo il JSON di esempio

Chiavi con trattini o spazi

Una chiave come prezzo-iva viene scritta tra virgolette ("prezzo-iva": number;), che è TypeScript valido; nel codice però dovrai leggerla con ordine["prezzo-iva"] invece della notazione col punto.

Array di oggetti con forme diverse

Tutti gli oggetti dell'array vengono confrontati: se note c'è solo in alcuni elementi diventa note?, e se vale ora una stringa ora null diventa string | null. Se però il tuo esempio contiene un solo elemento, il tipo descrive solo quello.

Due oggetti con la stessa chiave

Se meta compare in due punti con strutture diverse, la seconda interfaccia si chiama Meta2 (e così via). Il codice resta corretto, ma conviene dare nomi più parlanti.

Aspettarsi campi opzionali o `| null`

? e unioni con null vengono dedotti solo confrontando più elementi di uno stesso array. In un oggetto singolo un campo che vale null diventa di tipo null: allarga tu i tipi in base ai valori che il campo può davvero assumere.

Perché usare questo convertitore JSON in TypeScript

Gli oggetti annidati vengono gestiti ricorsivamente, un'interfaccia per livello, e il risultato si aggiorna mentre scrivi o cambi il nome del tipo radice. Se il JSON copiato è rovinato, il pulsante Fix prova a ripararlo senza dover passare per un altro strumento.

La conversione avviene interamente nel browser: il JSON incollato non viene inviato a nessun server, quindi puoi tipizzare anche payload reali con dati personali senza esporli.

`interface` o `type`?

Entrambi disponibili con il selettore dello strumento

interface
type
Estensione
con extends
con l'intersezione &
Declaration merging
sì
no
Unioni di tipi
no
sì
Uso tipico
forme di oggetti, API pubbliche
unioni e tipi composti

Domande frequenti

Incolla il JSON e lo strumento crea un'interfaccia per ogni oggetto annidato, chiamandola come la chiave in PascalCase. L'interfaccia radice usa il nome che scegli tu nel campo dedicato, RootObject se non lo cambi.

Riferimenti

TypeScript Handbook — Object Types

Documentazione ufficiale (in inglese) su tipi di oggetto, proprietà opzionali e interfacce.

TypeScript Handbook — Everyday Types

Guida ufficiale (in inglese) ai tipi di base, alle unioni e alle differenze tra type alias e interface.

jsonrepair (GitHub)

La libreria open source (in inglese) usata dal pulsante Fix per riparare il JSON non valido.

Strumenti correlati