Come converto JSON in un'interfaccia TypeScript?

Incolla un campione JSON, nomina la root e copia le interfacce generate. La conversione avviene nel browser. Oggetti annidati diventano interfacce nominate, gli array sono tipizzati da ogni elemento e chiavi mancanti su item array sono marcate opzionali con ?.

Qual e la differenza tra opzionale (?) e nullable (| null)?

Opzionale significa che la chiave era assente su alcuni item dell'array. Nullable significa che la chiave era presente e il valore era JSON null. email?: string permette di omettere il campo. note: string | null richiede la chiave. Questo convertitore non li collassa in email?: string | null salvo che il campione mostri entrambi.

Devo emettere interface o type alias?

Usa interface per forme oggetto che potresti estendere o unire tra file. Usa type alias per union, intersection e mapped types. Per una tipica risposta API va bene entrambi; questa pagina defaulta interface perche e lo stile TypeScript comune per modelli JSON.

Perche un campo e unknown[] o Record ?

Array vuoti non hanno elementi da ispezionare, quindi il fallback e unknown[]. Oggetti vuoti non hanno chiavi, quindi il fallback e Record . Incolla un esempio popolato per tipo elemento concreto o interfaccia annidata.

Sostituisce quicktype?

No. quicktype.io copre codegen multilingua e validator runtime. Questa pagina e un convertitore JSON in interfaccia TypeScript privato lato client per un payload incollato - niente install, account, e un report che separa chiavi opzionali da JSON null.

Il mio JSON viene caricato?

No. Parsing e inferenza avvengono solo nel browser. Sicuro per risposte API interne, token e PII. Verifica in DevTools Network: convertire non invia richieste.

Posso generare tipi da un array JSON?

Si, e dovresti quando le chiavi variano. Un array di record si fonde in un'interfaccia. Chiavi mancanti diventano opzionali. Se nomini la root Users, l'output e interface User piu type Users = User[]. Se la nomini User, tipizza il payload come User[].

Strumenti per sviluppatori

Convertitore JSON in Interfacce TypeScript

Genera interfacce TypeScript da un campione JSON nel browser - niente account, upload o CLI codegen.

Prova un campione

Campione JSON

La conversion se ejecuta en tu browser. El JSON no sale de este dispositivo.

Nombre raiz

Nombre PascalCase de la interfaz superior. Un array JSON llamado Users emite User mas type Users = User[].

Emitir como

interface es la forma habitual de una respuesta API e admite declaration merging. type alias encaja con uniones e mapped types.

Interfaces

Claves opcionales

Claves anulables

Uniones

? significa que la clave faltaba en algunos elementos del array. | null significa que el ejemplo tenia JSON null. No son lo mismo.

Notas de inferencia

La raiz JSON es un array. Tipa el payload como Root[] (o el alias de lista si usaste un nombre plural).

User.lastLogin era sempre null. Aggiungi un valore reale nel campione per inferire il tipo non null.

Informe de propiedades inferidas
Interfaz	Clave	Tipo	Flags
Address	city	string	requerida
Address	postcode	string	opcional ?
User	id	number	requerida
User	name	string	requerida
User	role	string	requerida
User	email	string	opcional ?
User	address	Address	requerida
User	lastLogin	null	opcional ? \| null
User	tags	string[]	opcional ?

TypeScript

export interface Address {
  city: string;
  postcode?: string;
}

export interface User {
  id: number;
  name: string;
  role: string;
  /** Email string */
  email?: string;
  address: Address;
  lastLogin?: null;
  tags?: string[];
}

Informazioni su Convertitore JSON in Interfacce TypeScript

Genera interfacce TypeScript da un campione JSON nel browser - niente account, upload o CLI codegen. Incolla una risposta API o, meglio, un array di record. Oggetti annidati diventano interfacce nominate, gli array sono tipizzati da ogni elemento (non solo il primo) e forme identiche sono deduplicate. Il walker non collassa chiavi mancanti e JSON null: una chiave omessa su alcuni item e opzionale (`?`); una chiave presente ma null e `T | null`. Copia il risultato in un file `.ts` o scaricalo. Abbinalo al Minificatore JSON se il payload e arrivato minificato, o al JSONPath Tester per ispezionare un campo prima.

Come usare Convertitore JSON in Interfacce TypeScript

Incolla JSON (un array di record inferisce chiavi opzionali piu accuratamente di un singolo oggetto). Carica un esempio se vuoi vedere opzionale vs nullable per primi.
Imposta il nome root (User, Order, ApiResponse). Scegli interface (default) o type alias.
Leggi il report inferenza: conteggio dichiarazioni, chiavi opzionali, chiavi nullable e union. Gli avvisi segnalano array vuoti, oggetti vuoti, campi tutti-null e chiavi quotate.
Copia il TypeScript o scarica un file .ts. Mettilo in types/ e annota `fetch` / TanStack Query con il nome root.
Nulla viene inviato a un server. JSON non valido segnala riga e colonna.

Esempi di Convertitore JSON in Interfacce TypeScript

Chiave opzionale da array di record

[{"sku":"A1","qty":2},{"sku":"B7","qty":1,"gift":true}] diventa Order con gift?: boolean. La chiave e opzionale perche il primo item l'ha omessa - non perche il valore era null.

Nullable vs opzionale

Due utenti dove email manca su una riga e note e null sull'altra emettono email?: string e note: string | null. Chiavi mancanti e JSON null restano distinti, cosa che la maggior parte dei convertitori collassa.

Interfacce annidate nominate

{"user":{"address":{"city":"London"}}} emette Address, poi User, poi Root. Oggetti annidati sono nominati dalle chiavi in PascalCase cosi puoi importare Address da solo.

Chiavi quotate e contenitori vuoti

{"content-type":"application/json","items":[],"meta":{}} quota content-type, tipizza items come unknown[] e meta come Record<string, unknown>. Gli avvisi chiedono un campione piu ricco.

interface vs type alias

Lascia interface per forme risposta API (declaration merging, errori leggermente migliori). Passa a type alias quando il file avra union o mapped types. A runtime l'output e identico.

Casi d'uso comuni

Tipizzare risposte fetch() o axios in app React, Vue o Next.js
Generare generic TanStack Query / SWR da payload reale
Trasformare un body webhook (Stripe, GitHub, Slack) in evento tipizzato
Bozzare tipi per fixture prima che esista la spec OpenAPI
Convertire un blob config JSON in TypeScript completo per l'editor

Domande frequenti su Convertitore JSON in Interfacce TypeScript

Come converto JSON in un'interfaccia TypeScript?: Incolla un campione JSON, nomina la root e copia le interfacce generate. La conversione avviene nel browser. Oggetti annidati diventano interfacce nominate, gli array sono tipizzati da ogni elemento e chiavi mancanti su item array sono marcate opzionali con ?.
Qual e la differenza tra opzionale (?) e nullable (| null)?: Opzionale significa che la chiave era assente su alcuni item dell'array. Nullable significa che la chiave era presente e il valore era JSON null. email?: string permette di omettere il campo. note: string | null richiede la chiave. Questo convertitore non li collassa in email?: string | null salvo che il campione mostri entrambi.
Devo emettere interface o type alias?: Usa interface per forme oggetto che potresti estendere o unire tra file. Usa type alias per union, intersection e mapped types. Per una tipica risposta API va bene entrambi; questa pagina defaulta interface perche e lo stile TypeScript comune per modelli JSON.
Perche un campo e unknown[] o Record<string, unknown>?: Array vuoti non hanno elementi da ispezionare, quindi il fallback e unknown[]. Oggetti vuoti non hanno chiavi, quindi il fallback e Record<string, unknown>. Incolla un esempio popolato per tipo elemento concreto o interfaccia annidata.
Sostituisce quicktype?: No. quicktype.io copre codegen multilingua e validator runtime. Questa pagina e un convertitore JSON in interfaccia TypeScript privato lato client per un payload incollato - niente install, account, e un report che separa chiavi opzionali da JSON null.
Il mio JSON viene caricato?: No. Parsing e inferenza avvengono solo nel browser. Sicuro per risposte API interne, token e PII. Verifica in DevTools Network: convertire non invia richieste.
Posso generare tipi da un array JSON?: Si, e dovresti quando le chiavi variano. Un array di record si fonde in un'interfaccia. Chiavi mancanti diventano opzionali. Se nomini la root Users, l'output e interface User piu type Users = User[]. Se la nomini User, tipizza il payload come User[].

Minificatore e formattatore JSON

Minificatore e formattatore JSON online gratuito. Minifica JSON per payload piu piccoli o formatta (pretty-print) con indentazione 2 spazi. Valida mentre lavori - nessun upload.

Tester JSONPath

Prova JSONPath online nel browser. Estrai un campo da JSON, prova un filtro di esempio e copia percorsi normalizzati - nulla viene caricato.

Generatore JSON Schema

Generatore JSON Schema gratuito nel browser. Incolla JSON di esempio, inferisci tipi e formati e copia uno schema Draft-07 o 2020-12. Nulla viene caricato.

Convertitore JSON in CSV

Converti JSON in CSV e CSV in JSON nel browser. Appiattisci oggetti annidati, ricostruisci chiavi puntate al ritorno, NDJSON, preset Excel EU, RFC 4180. Nulla viene caricato.