Vai al contenuto principale
Bethemesh
Sviluppo

JSON in TypeScript, Zod e JSON Schema

Inferisci interfacce TypeScript, tipi, schemi Zod o JSON Schema da oggetti e array di un esempio JSON, localmente nel browser.

  • Appunti
  • Esporta

Integra questo widget

Personalizza il risultato, controlla l’anteprima e copia il codice.

Anteprima

Tipo di codice di integrazione

Codice da copiare

Responsive e ridimensionato automaticamente da Bethemesh.

Questo strumento ti è stato utile?

Come funziona questo strumento?

Trasforma un esempio JSON in interfacce o alias TypeScript, schemi Zod o JSON Schema. Il generatore percorre oggetti annidati e tutti gli elementi degli array, non soltanto il primo. Ottieni una base da rivedere secondo l’API: un campione non rivela tutti i valori restituiti da un servizio. L’inferenza avviene sul dispositivo e il codice generato non viene eseguito nel modulo.

Il motore identifica stringhe, numeri, booleani, oggetti, array e null. Tipi osservati diversi possono formare un’unione. I numeri TypeScript usano number; stringhe simili a date o email restano string, senza regole applicative indovinate. Un array vuoto non rivela gli elementi futuri e produce un tipo sconosciuto.

In un array di oggetti si combinano le proprietà osservate. Un campo assente in alcune voci può diventare facoltativo. La modalità che impone tutti i campi crea un contratto più rigoroso, che alcuni esempi non rispetterebbero più. Un campo presente con null non è assente: nullabilità e facoltatività sono informazioni distinte.

Scegli interface o type per dichiarazioni TypeScript, Zod per codice di validazione o JSON Schema per un documento di schema. readonly riguarda TypeScript e non congela oggetti in esecuzione. L’output Zod importa zod, che il progetto deve fornire, e dichiara schemi figli prima dei riferimenti dei genitori.

Le destinazioni condividono l’inferenza senza promettere comportamenti identici. TypeScript controlla codice in sviluppo, non automaticamente risposte di rete. Zod richiede una vera chiamata di validazione. JSON Schema chiude gli oggetti con additionalProperties: false: decidi esplicitamente come trattare chiavi aggiuntive prima dell’integrazione.

Come usare questo strumento

  1. Aggiungi un campione rappresentativo

    Incolla o importa JSON valido. Evita dati personali inutili: contano struttura e diversi tipi osservati.

  2. Scegli nome radice e destinazione

    Assegna il nome al modello e scegli l’output. Regola campi assenti e readonly quando la destinazione TypeScript lo consente.

  3. Rivedi e integra il codice

    Controlla unioni, proprietà facoltative e dipendenze prima di copiare o esportare. Cambiare input od opzioni nasconde il risultato precedente. Compila o valida poi nel progetto.

Casi d’uso

Abbozzare modelli di risposta API

Fornisci esempi rappresentativi con annidamenti, varianti e null. Rivedi poi nomi proposti e campi realmente garantiti dal fornitore.

Preparare validazione Zod

Genera schemi di base e aggiungi formati, limiti e regole applicative. Una semplice stringa non viene automaticamente considerata un URL valido.

Confrontare più campioni con un contratto

Raggruppa oggetti comparabili in un array per mostrare campi presenti solo in alcuni casi. Includi situazioni rare conosciute.

Esempi

Creare due interfacce per una risposta annidata

Con nome radice Response e destinazione interface, user diventa un modello User separato. id è number e name string; i valori concreti dell’esempio non vengono fissati.

Input

{"user":{"id":1,"name":"Ada"}}

Risultato

export interface Response {
  user: User;
}

export interface User {
  id: number;
  name: string;
}

Dichiarare dipendenze Zod prima dell’uso

Con nome radice Root e output Zod, ChildSchema precede RootSchema ed evita riferimenti a costanti prima dell’inizializzazione.

Input

{"child":{"id":1}}

Risultato

import { z } from 'zod';

export const ChildSchema = z.object({
  id: z.number(),
});
export type Child = z.infer<typeof ChildSchema>;

export const RootSchema = z.object({
  child: ChildSchema,
});
export type Root = z.infer<typeof RootSchema>;

Consigli e buone pratiche

  • Includi campi omessi e valori null. Una risposta interamente compilata nasconde spesso proprietà facoltative.
  • Un campione non dimostra un elenco esaustivo di valori né un limite numerico. Aggiungi vincoli dalla documentazione del servizio.
  • Non confondere readonly con protezione in esecuzione: qui è un controllo TypeScript.
  • Mantieni identificatori grandi come stringhe quando l’API li rappresenta così. JSON viene letto con i tipi numerici del browser.

Fonti e riferimenti

Domande frequenti

Un’interfaccia generata valida le risposte dell’API?

No. TypeScript descrive i valori attesi durante lo sviluppo. Per verificare dati ricevuti in esecuzione, aggiungi un validatore e usa effettivamente il suo risultato prima di fidarti della risposta.

Come si individuano proprietà facoltative?

Si confrontano oggetti dello stesso array cercando chiavi assenti in alcune voci. Un solo oggetto che contiene sempre un campo non rivela se il campo possa essere omesso.

Perché una data o email diventa semplicemente string?

Il campione fornisce una stringa, non prova la regola applicativa. Il generatore evita validazioni arbitrarie basate sull’aspetto. Aggiungi esplicitamente formati e vincoli richiesti.

Qual è la differenza dal generatore JSON Schema autonomo?

Qui trovi più destinazioni e opzioni per nomi e campi facoltativi. Lo strumento autonomo genera direttamente uno schema e distingue gli interi osservati. Entrambi usano la stessa inferenza condivisa.

Strumenti correlati

Continua con questi strumenti

Strumenti simili o complementari a questo.

Strumenti simili

Generatore JSON Schema

Genera un JSON Schema da un esempio JSON, localmente nel browser.

SviluppoUsa questo strumento

Validatore JSON Schema

Valida un documento JSON con uno schema e individua con precisione ogni errore.

SviluppoIn evidenzaUsa questo strumento

Data Faker

Genera set di dati fittizi realistici in JSON, CSV o SQL.

SviluppoUsa questo strumento