JSON in TypeScript

Carica

Interfaccia TypeScript

Inserisci JSON a sinistra per iniziare la conversione

Pronto

Convertitore online gratuito da JSON a TypeScript. Deduce automaticamente JSON in dichiarazioni di interface TS standard. Supporta interface nidificate, union, campi opzionali e readonly, opzioni di indentazione 2/4 spazi, 100% nel browser.

Raccomandazioni correlate

Convertitore SQL

Formattatore JSON

JSON to CSV

Da JSON a YAML

Query JSONPath

Formattatore SQL

Informazioni su JSON in TypeScript: trasformare i dati JSON in tipi TS automaticamente

JSON in TypeScript è il processo di conversione di dati in formato JSON (oggetti o array JSON) in dichiarazioni di interface TypeScript. JSON (JavaScript Object Notation) è il formato dati standard per API REST, file di configurazione e log, mentre TypeScript è un superset staticamente tipizzato di JavaScript. Nello sviluppo quotidiano, scrivere interface TS a mano dal JSON dell'API è soggetto a errori e richiede tempo; questo strumento automatizza quel flusso di lavoro.

Al suo interno, lo strumento deduce la struttura di un oggetto JSON ed emette un'interface TypeScript. Ogni chiave dell'oggetto diventa una proprietà dell'interface; il tipo letterale di ogni valore viene mappato alla sua controparte TS: le stringhe diventano `string`, i numeri `number`, i booleani `boolean`, null `null`, gli array `T[]`, gli oggetti nidificati in sotto-interface indipendenti.

L'inferenza dei tipi è il cuore di JSON in TypeScript. JSON ha solo sei tipi primitivi (null, boolean, number, string, array, object), mentre il sistema di tipi di base di TypeScript include string, number, boolean, null, undefined, any, unknown, void, never, object, Array, T[], tipi unione (A | B) e altro. La funzione getTsType dello strumento mappa ogni valore in base al suo typeof e forma.

La gestione degli oggetti nidificati è una capacità chiave. Quando il JSON contiene oggetti nidificati, lo strumento genera ricorsivamente sotto-interface indipendenti per evitare duplicazioni. Ad esempio, `address: { street, city }` produce una sotto-interface RootAddress, e l'interface principale la riferenzia tramite `address: RootAddress`.

L'inferenza dei tipi array ha tre modalità. In primo luogo, gli array vuoti ricadono su `any[]` perché non c'è un tipo di elemento da ispezionare. In secondo luogo, quando tutti gli elementi condividono lo stesso tipo, il risultato è `T[]` (ad esempio `string[]` o `User[]`). In terzo luogo, quando i tipi degli elementi differiscono, il risultato è un array unione `(A | B)[]` (ad esempio `(string | number)[]`).

I campi opzionali (?) sono importanti in TypeScript strict mode. Quando l'opzione è attivata, lo strumento scansiona il valore di ogni campo; se vede null o undefined, aggiunge `?` a quel campo nell'interface, ad es. `name?: string` significa che il campo può mancare. Ciò è inestimabile per le API backend che restituiscono campi opzionali. I campi readonly sottolineano l'immutabilità, producendo codice come `readonly id: number` per configurazione, snapshot di stato o DTO.

interface vs type alias è una scelta comune per gli utenti TypeScript. Lo strumento genera interface perché sono il modo standard per descrivere la forma di un oggetto: supportano la fusione delle dichiarazioni, la parola chiave implements e l'ereditarietà extends.

La conversione in tempo reale è una funzionalità pratica. Lo strumento converte 400ms dopo l'interruzione della digitazione, senza bisogno di fare clic su un pulsante. Combinato con l'evidenziazione della sintassi TypeScript di CodeMirror, gli utenti possono vedere immediatamente l'interface generata e iterare rapidamente.

L'auto-riparazione degli errori JSON aumenta la resilienza dello strumento. Il JSON del mondo reale ha spesso virgole finali, apici singoli, virgolette mancanti o commenti. La routine integrata tryFixJSON si attiva quando JSON.parse fallisce e tenta di correggere gli errori comuni.

L'elaborazione puramente lato client è la decisione architetturale centrale. Tutta l'analisi JSON, l'inferenza dei tipi e la generazione dell'interface vengono eseguite in JavaScript del browser; nulla viene mai inviato a un server.

Casi d'uso

Converti rapidamente le risposte JSON di API REST o GraphQL in interface TS durante lo sviluppo frontend, evitando definizioni di tipi scritte a mano.
Genera tipi TS per Props, State e parametri di componenti React/Vue/Angular da JSON di esempio in pochi secondi.
Condividi i tipi tra frontend e backend in un progetto TypeScript full-stack, usando il JSON mock del backend come unica fonte di verità.
Genera interface TypeScript durante l'integrazione di API di terze parti (spedizioni, meteo, pagamenti) senza leggere documentazione lunga.
Esegui il reverse engineering delle definizioni di tipi da dati mock, fixture di test o file di configurazione JSON per rafforzare la sicurezza dei tipi e i suggerimenti IDE.
Converti le esportazioni JSON Schema degli ORM di database in interface TypeScript per definizioni DTO backend Node.js.
Impara TypeScript convertendo JSON esistente in esempi di interface per capire tipi nidificati, union e campi opzionali.
Refactoring di object literal JS sparsi in interface formali per migliorare la leggibilità del codice e la sicurezza dei tipi.

Come utilizzare

Incolla JSON nell'editor di sinistra, fai clic su Carica per selezionare un file .json/.txt, o fai clic su Esempio per caricare l'esempio integrato.
Fai clic sul pulsante del nome dell'interface a destra della barra degli strumenti (o l'icona ingranaggio) per rinominare l'interface radice (predefinito Root) e attivare/disattivare i campi opzionali/readonly.
Lo strumento converte automaticamente con un debounce di 400ms. Visualizza l'interface TypeScript generata a destra con evidenziazione CodeMirror.
Passa tra indentazione a 2 e 4 spazi dalla barra degli strumenti e regola la divisione tra i pannelli sinistro e destro per la migliore visualizzazione.
Fai clic su Copia per mettere il codice TS negli appunti, o fai clic su Scarica per salvarlo come file `${interfaceName}.ts` (ad es. User.ts).
Incolla il codice nella directory `types/` o `src/types/` del tuo progetto e importalo dove necessario.

Funzionalità

Inferenza intelligente dei tipi: riconosce automaticamente null, boolean, number, string, array e object e li mappa ai tipi TS nativi.
Espansione oggetti nidificati: ogni oggetto nidificato diventa una sotto-interface (ad es. RootAddress) per una gerarchia di tipi pulita e senza duplicazioni.
Intelligenza tipi array: array omogenei diventano `T[]`, array di tipo misto diventano union `(A | B)[]`, array vuoti ricadono su `any[]`.
Marcatura campi opzionali: quando attivata, i campi null o undefined ricevono il modificatore `?`, producendo codice compatibile con TypeScript strict mode.
Supporto campi readonly: quando attivato, ogni campo riceve il modificatore `readonly`, ideale per stato immutabile, configurazione e DTO.
Nome interface personalizzato: il nome dell'interface radice è configurabile (predefinito Root) e il file scaricato è nominato di conseguenza (ad es. User.ts).
Opzioni indentazione 2/4 spazi: passa tra indentazione a 2 spazi (predefinito ESLint) e 4 spazi dalla barra degli strumenti.
Conversione automatica in tempo reale: lo strumento converte 400ms dopo l'interruzione della digitazione, supportando incolla, caricamento file e caricamento esempio.
Auto-riparazione errori JSON: la routine integrata tryFixJSON gestisce automaticamente virgole finali, apici singoli e virgolette di chiave mancanti.
Evidenziazione codice TypeScript: l'editor di destra usa CodeMirror con l'estensione del linguaggio TypeScript per una chiara colorazione della sintassi.
Copia e download: copia il risultato negli appunti con un clic o salvalo come file .ts standard pronto per il tuo progetto.
100% nel browser: tutta l'analisi, l'inferenza e la generazione dell'interface avvengono in JavaScript lato client; il JSON originale non lascia mai il tuo dispositivo.

Domande frequenti

Come converto un JSON in interface TypeScript?

Incolla il tuo JSON nell'editor di sinistra e lo strumento deduce automaticamente il tipo di ogni campo (string, number, boolean, array, object, ecc.) e genera un'interface TypeScript standard. Gli oggetti nidificati vengono estratti in sotto-interface separate. La conversione viene eseguita automaticamente 400ms dopo l'interruzione della digitazione.

Lo strumento genera type alias o interface?

Questo strumento genera esclusivamente dichiarazioni di interface TypeScript (non type alias). Le interface sono il modo standard per descrivere la forma di un oggetto in TypeScript: supportano la fusione delle dichiarazioni e la parola chiave implements.

Come marco i campi come opzionali?

Attiva "Campi opzionali (?)" nel pannello delle impostazioni. Lo strumento scansiona il valore di ogni campo e, quando trova null o undefined, aggiunge automaticamente il modificatore `?` all'interface. Ad esempio, `name?: string` significa che il campo può mancare.

Come genero campi readonly?

Attiva "Campi readonly" nel pannello delle impostazioni. Ogni campo riceve il modificatore `readonly`, ad esempio `readonly id: number`. Ciò sottolinea l'immutabilità ed è ideale per configurazione, snapshot di stato o definizioni DTO.

Come gestisce gli array?

Lo strumento analizza i tipi degli elementi di ogni array. Quando tutti gli elementi condividono lo stesso tipo, emette `T[]` (ad esempio `string[]`); quando i tipi differiscono, emette un array unione `(A | B)[]` (ad esempio `(string | number)[]`); quando l'array è vuoto, ricorre a `any[]`.

Un oggetto nidificato diventa una sua interface?

Sì. Ogni oggetto nidificato diventa una propria sotto-interface nominata combinando il nome dell'interface padre con il nome del campo in PascalCase. Ad esempio, un'interface Root che contiene un oggetto `address` produce Root e RootAddress.

Posso personalizzare il nome dell'interface?

Sì. Fai clic sul pulsante del nome dell'interface a destra della barra degli strumenti (o apri la finestra delle impostazioni) per rinominare l'interface radice (il valore predefinito è Root). Il file .ts scaricato verrà nominato anche con questo valore.

Il file .ts scaricato può essere usato direttamente in un progetto?

Sì. Il codice generato segue le best practice di TypeScript, include definizioni di tipi complete, interface nidificate e tipi unione, e può essere incollato così com'è in progetti React, Vue, Angular o Node.js.

Cosa succede se il mio JSON non viene analizzato?

Quando il JSON contiene virgole finali, virgolette mancanti o apici singoli al posto di quelli doppi, lo strumento chiama automaticamente tryFixJSON per tentare una riparazione. Se la riparazione riesce, verrai avvisato; in caso contrario, il pannello di destra mostra la posizione esatta dell'errore.

Quali strutture JSON sono supportate?

Tutto il JSON valido è supportato: primitivi (null, boolean, number, string), array di qualsiasi profondità, oggetti nidificati a qualsiasi profondità e array di tipo misto (che diventano tipi unione). Input non validi come funzioni, Symbols o valori undefined non fanno parte della specifica JSON e non vengono accettati.

Posso scegliere la dimensione dell'indentazione?

Sì. Un menu a discesa nella barra degli strumenti di destra ti consente di passare tra indentazione a 2 e 4 spazi. Due spazi corrispondono al valore predefinito di ESLint/Prettier; quattro spazi si adattano a progetti che preferiscono un'indentazione più ampia.

In cosa differisce da JSON Schema o Zod?

JSON Schema è ideale per la convalida dei dati a runtime (limiti API, convalida input utente). Zod e yup sono validatori a runtime amichevoli con TypeScript che possono derivare tipi TS da uno schema. Questo strumento è un generatore leggero solo di definizioni di tipi; non esegue controlli a runtime, si concentra sul typing statico frontend, è più veloce e non ha dipendenze.

Risoluzione dei problemi

L'interface generata sembra errata. Cosa devo fare?

Cause comuni: errore di analisi JSON, identificazione errata di oggetti nidificati o inferenza del tipo di array errata. Prova questi passi: 1) Valida il JSON con un formattatore JSON; 2) Per gli oggetti nidificati, verifica i riferimenti alle sotto-interface; 3) Per gli array, conferma che i tipi degli elementi siano coerenti; 4) Rigenera o modifica manualmente l'output. L'interface è una prima bozza, quindi regola sempre i dettagli rispetto all'API reale.

Il file .ts scaricato non compila nel mio progetto.

Cause probabili: 1) tsconfig.json non ha strict mode ma il codice generato usa readonly; 2) il nome dell'interface è in conflitto con un tipo esistente; 3) un nome di campo è una parola chiave TypeScript (come class o type). Soluzione: regola strict mode, rinomina l'interface o cita il campo in conflitto (ad es. "class": string).

Il JSON contiene array nidificati ma il tipo dedotto è errato.

Lo strumento gestisce gli array multidimensionali (ad es. [[1, 2], [3, 4]]) ricorsivamente e produce number[][]. Se i tipi degli elementi dell'array nidificato differiscono, lo strumento emette ((A | B)[])[] . Gli array vuoti diventano sempre any[] perché non c'è un tipo di elemento da dedurre.

I valori null vengono mappati al tipo `null` invece di campi opzionali.

Per impostazione predefinita, lo strumento mappa i valori JSON null al tipo `null` di TS (ad es. middleName: null). Per produrre campi opzionali: 1) attiva l'opzione Campi opzionali (consigliato); 2) rimuovi i valori null dal JSON in modo che il campo sia mancante; oppure 3) dopo la generazione, cambia manualmente `null` in `string | null` o usa `?`.

Il nome dell'interface e il nome del file scaricato non corrispondono.

Entrambi sono guidati dallo stesso valore, l'impostazione Nome Interface (predefinito Root). Il file scaricato si chiama `${interfaceName}.ts`. Se sembrano fuori sincrono, verifica se lo strumento è aperto in più schede con impostazioni diverse. Riapri la pagina o aggiorna le impostazioni per allinearle.

Il codice generato è pieno di tipi `any`.

Cause probabili: 1) il JSON contiene valori che il parser non ha potuto riconoscere; 2) gli array sono vuoti e ricadono su any[]; 3) i campi sono null e l'opzione opzionale è disattivata. Soluzione: verifica l'integrità dei dati, aggiungi più dati di esempio per migliorare l'inferenza o specifica manualmente i tipi per i campi sempre vuoti (ad es. User[]).

Come fondo l'interface generata con un tipo esistente?

Le interface TypeScript supportano la fusione delle dichiarazioni: interface con lo stesso nome fondono automaticamente i loro membri. Dichiara semplicemente un'interface con lo stesso nome nel tuo progetto ed esportala; ad esempio, lo strumento emette `export interface User { id: number }` e tu scrivi `export interface User { name: string }`, e si fondono automaticamente in `{ id: number; name: string }`.

Glossario

JSON (JavaScript Object Notation): Formato leggero di scambio dati basato sulla sintassi degli oggetti JavaScript ma indipendente da qualsiasi linguaggio di programmazione. Supporta sei tipi base: oggetto ({}), array ([]), string, number, boolean e null.
TypeScript: Superset di JavaScript sviluppato da Microsoft che aggiunge definizioni di tipi statici, interface, generici e altre funzionalità. Il codice TypeScript viene compilato in JavaScript puro ed eseguito nel browser o su Node.js.
interface: Parola chiave TypeScript che descrive la forma di un oggetto. Sintassi: `interface Name { prop: type; }`. Supporta la fusione delle dichiarazioni, la parola chiave implements e l'ereditarietà extends.
type alias: Parola chiave TypeScript che assegna un nome a un tipo. Sintassi: `type Name = ...`. Utile per tipi unione, intersezione e tipi di funzione. Questo strumento emette esclusivamente interface.
Inferenza dei tipi: Il processo con cui questo strumento decide il tipo TS per ogni valore JSON in base al suo typeof e forma.
Campo opzionale (?): Modificatore TypeScript che contrassegna un campo come potenzialmente mancante. `name?: string` significa che il campo name potrebbe non esistere.
Campo readonly: Modificatore TypeScript che contrassegna un campo come immutabile dopo la creazione dell'oggetto. `readonly id: number` significa che id non può essere riassegnato.
Tipo unione: Tipo TypeScript che consente a un valore di essere uno tra diversi tipi. Scritto come `A | B`. Lo strumento usa questa notazione quando gli elementi dell'array hanno tipi diversi.
Tipo array: Sintassi TypeScript per gli array, disponibile in due forme: la forma generica `Array<T>` e la forma breve `T[]`. Lo strumento usa sempre la forma breve.
Interface nidificata: Un'interface che fa riferimento ad altre interface per formare una gerarchia di tipi. Lo strumento produce una sotto-interface per ogni oggetto nidificato.
TypeScript strict mode: Insieme di opzioni rigorose del compilatore TypeScript (noImplicitAny, strictNullChecks, strictFunctionTypes e altro). Con strictNullChecks abilitato, null e undefined sono tipi indipendenti.
DTO (Data Transfer Object): Oggetto utilizzato per trasferire dati tra livelli (ad esempio, tra un'API e un servizio). I progetti TypeScript descrivono tipicamente i DTO con interface, spesso usando readonly per rafforzare l'immutabilità.
Fusione delle dichiarazioni: Funzionalità TypeScript per le interface: interface con lo stesso nome fondono automaticamente i loro membri.
tsconfig.json: File di configurazione del progetto TypeScript nella radice del progetto. Contiene compilerOptions (target, module, strict e altro), include ed exclude.
tryFixJSON: Routine di riparazione JSON integrata nello strumento che gestisce virgole finali, apici singoli al posto di quelli doppi, virgolette di chiave mancanti, commenti e altri errori di sintassi JSON comuni.

Regole di mappatura dei tipi da JSON a TypeScript

L'insieme completo di regole utilizzate dalla funzione getTsType per mappare i valori JSON ai tipi TypeScript:

Valore JSON	Esempio	Tipo TypeScript	Regola di rilevamento
`null`	`null`	`null`	JSON null viene mappato direttamente a TS null
`undefined`	`undefined`	`undefined`	I valori undefined vengono mappati a TS undefined (solo a runtime)
`boolean`	`true / false`	`boolean`	typeof boolean viene mappato a TS boolean
`integer`	`1, 100, -9999`	`number`	Interi e float vengono mappati a TS number
`float`	`3.14, -0.5, 1e10`	`number`	Tutti i letterali numerici vengono mappati a number
`string`	`"Alice", "Roma"`	`string`	typeof string viene mappato a TS string
`empty array`	`[]`	`any[]`	Gli array vuoti ricadono su any[]
`homogeneous array`	`[1, 2, 3]`	`T[] (es. number[])`	Elementi dello stesso tipo producono un singolo tipo di array
`mixed array`	`[1, "a"]`	`(A \| B)[] (es. (number \| string)[])`	Elementi di tipo misto producono un array unione
`object`	`{a: 1, b: "x"}`	`SubInterface (es. Root)`	Gli oggetti nidificati diventano sotto-interface indipendenti che sono riferenziate

Confronto interface vs type alias

Perché questo strumento genera interface invece di type alias, e come si confrontano nei progetti TypeScript:

Capacità	interface	type alias	Note
Descrizione forma oggetto	✓ (preferita)	✓ (supportata)	Entrambe funzionano; lo strumento emette interface
Fusione dichiarazioni	✓ (stesso nome si fonde)	✗ (errore duplicato)	interface permette estensione graduale
implements/extends	✓ (classi possono implements)	△ (solo oggetti type)	interface è più naturale in OOP
Tipi unione (A \| B)	✗	✓	type è più conciso per unioni
Tipi intersezione (A & B)	✗	✓	type è più conciso per intersezioni
Tipi di funzione	△ (richiede call signature)	✓ (diretto)	type è più intuitivo per funzioni
Prestazioni (molti tipi)	leggermente più veloce	leggermente più lento	interface si fonde incrementalmente
Scelta di questo strumento	✓ uso unificato	✗	Questo strumento si concentra sui tipi di oggetto

Regole di generazione campi opzionali e readonly

Come le due opzioni a interruttore influenzano il codice generato e quando usare ciascuna:

Opzione	Trigger	Sintassi generata	Ideale per
Opzionale (?): off	(predefinito)	`name: string`	Rigoroso, tutti i campi obbligatori
Opzionale (?): on	value === null \|\| value === undefined	`name?: string`	Campi opzionali, dati mancanti
Readonly: off	(predefinito)	`name: string`	Tipi generici, campi scrivibili
Readonly: on	si applica a ogni campo	`readonly name: string`	Stato immutabile, configurazione, DTO
Entrambi on	entrambe le condizioni si applicano	`readonly name?: string`	Snapshot di risposta API, configurazione opzionale

Privacy & Security

Questo strumento di conversione da JSON a TypeScript viene eseguito interamente nel tuo browser. L'analisi JSON, l'inferenza dei tipi e la generazione dell'interface avvengono in JavaScript lato client; nulla viene inviato a un server. I caricamenti di file utilizzano l'API nativa FileReader e non passano mai attraverso un servizio intermedio. Lo strumento non utilizza cookie di tracciamento e non raccoglie dati di input o utilizzo. Tutti gli input e output vengono cancellati dalla memoria non appena la pagina viene chiusa o ricaricata. Sicuro da usare con JSON contenenti dati personali, segreti aziendali o qualsiasi altro contenuto sensibile.

Authoritative References

TypeScriptManuale TypeScript - Interface
TypeScriptIntroduzione al manuale TypeScript
MDNSpecifica JSON - MDN Web Docs
TypeScriptTypeScript Playground
TypeScriptRiferimento tsconfig.json
ZodZod - validazione schemi TypeScript-first