Convertitore da JSON a interfacce TypeScript + schema Zod | We.Inc
Incolla JSON e ottieni insieme interfacce TypeScript e uno schema Zod. Gli array vengono uniti così i campi mancanti diventano opzionali. Niente lascia il tuo browser.
Incolla un qualsiasi esempio JSON e questo convertitore scrive interfacce TypeScript per i controlli in fase di compilazione e uno schema Zod per verificare i dati a runtime. Gli oggetti annidati ricevono tipi con un proprio nome, gli array di oggetti vengono uniti così i campi assenti in alcuni elementi diventano opzionali, e la conversione avviene in locale, quindi i payload privati restano sul tuo computer.
Come i valori JSON diventano tipi
Valore JSON
TypeScript
Zod
"text"
z.string()
42 o 4.2
z.number()
z.boolean()
z.null()
number[]
z.array(z.number())
interfaccia con a: number
z.object({ a: z.number() })
Chiave mancante in alcuni elementi dell'array
key?: type
.optional()
I tipi sono buoni solo quanto l'esempio, quindi incolla una risposta che mostri ogni campo che ti aspetti, idealmente con diversi elementi negli array. Rinomina il tipo radice, scegli tra interface e type alias e copia uno dei due output.
Tipi o schema: quale ti serve?
I tipi TypeScript spariscono quando il codice viene compilato. Aiutano il tuo editor e trovano errori nel tuo codice, ma non possono dirti che un'API ha inviato una stringa dove ti aspettavi un numero.
Uno schema Zod è codice reale che viene eseguito. Chiamare parse sui dati in arrivo genera un errore che indica il campo sbagliato, e z.infer ti dà il tipo TypeScript dallo stesso schema, così i due non divergono mai. Per i dati che arrivano da fuori dalla tua app, lo schema è la scelta più sicura.
Leggere cosa ha dedotto il convertitore
Un campo che nel tuo esempio era null diventa il tipo null, perché l'esempio non dà altri indizi. Cambialo in string | null (o .nullable() in Zod) quando sai cosa contiene, oppure attiva l'opzione che rende opzionali i campi null.
Un array vuoto diventa unknown[] per lo stesso motivo. In JSON le date arrivano come stringhe, quindi restano stringhe; in Zod puoi restringerne una a z.string().datetime() o simili quando conosci il formato.
I nomi dei tipi derivano dalle chiavi: un array staff produce Staff, un oggetto address produce Address. Se due chiavi darebbero lo stesso nome, viene aggiunto un numero.
Incolla il JSON nella casella, o tieni l'esempio per vedere come si comporta.
Imposta il nome del tipo radice. Ogni oggetto annidato riceve un nome dalla sua chiave.
Scegli interface o type alias, e se le proprietà devono essere readonly.
Copia il TypeScript, lo schema Zod o entrambi. Gli errori nel JSON vengono mostrati con il messaggio del parser.
Incolla due o tre elementi in ogni array così i campi opzionali vengono rilevati.
Rimuovi i valori sensibili prima di condividere i tipi generati; lo strumento in sé non carica mai nulla.
Tieni gli schemi vicino al codice che recupera i dati, ed esegui il parse su quel confine, non in profondità dentro i componenti.
Usa safeParse invece di parse quando vuoi mostrare un messaggio comprensibile invece di generare un errore.
Domande frequenti
Devo usare un'interface o un type alias?
Qui entrambi descrivono le forme degli oggetti altrettanto bene. Le interface con lo stesso nome si uniscono, il che aiuta quando estendi i tipi di una libreria; i type alias non si uniscono ma possono dare un nome alle union. Scegli uno stile per il codebase e mantienilo.
Come ottengo il tipo TypeScript da uno schema Zod?
Usa type User = z.infer<typeof UserSchema>. L'output Zod generato include già questa riga sotto ogni schema, quindi non devi mantenere interfacce separate.
Perché un campo ha tipo null?
Nel tuo esempio lì c'era null, quindi non c'era altro da dedurre. Sostituiscilo con il tipo reale unito a null, per esempio string | null, oppure z.string().nullable() nello schema.
Il mio JSON viene inviato a un server?
No. Parsing e generazione girano in JavaScript in questa pagina. Puoi caricare la pagina, andare offline e funziona ancora.
Usare l'output
Validare una risposta con lo schema generato
safeParse restituisce un successo o un elenco di problemi invece di generare un errore, il che si adatta al codice di fetch che deve mostrare uno stato di errore.
La stessa forma come semplici interfacce
Comodo per tipizzare props o argomenti di funzione quando i dati sono già affidabili.
Incolla JSON, ottieni i tipi
Incolla una risposta di esempio. Il convertitore scrive affiancati interfacce TypeScript e uno schema Zod corrispondente, unendo ogni elemento di un array così i campi mancanti in alcuni elementi risultano opzionali.