Convertisseur JSON vers interface TypeScript et schéma Zod | We.Inc
Collez du JSON et obtenez à la fois des interfaces TypeScript et un schéma Zod. Les tableaux sont fusionnés pour que les champs manquants deviennent optionnels. Rien ne quitte votre navigateur.
Collez n'importe quel exemple JSON et ce convertisseur écrit des interfaces TypeScript pour les vérifications à la compilation et un schéma Zod pour vérifier les données à l'exécution. Les objets imbriqués reçoivent leurs propres types nommés, les tableaux d'objets sont fusionnés pour que les champs absents de certains éléments deviennent optionnels, et la conversion se fait en local : vos données privées restent sur votre machine.
Correspondance entre valeurs JSON et types
Valeur JSON
TypeScript
Zod
"text"
z.string()
42 ou 4.2
z.number()
z.boolean()
z.null()
number[]
z.array(z.number())
interface avec a: number
z.object({ a: z.number() })
Clé absente de certains éléments du tableau
key?: type
.optional()
Les types ne valent que ce que vaut l'exemple : collez donc une réponse qui montre chaque champ attendu, idéalement avec plusieurs éléments de tableau. Renommez le type racine, passez de interface à type alias, et copiez l'une ou l'autre sortie.
Des types ou un schéma : de quoi avez-vous besoin ?
Les types TypeScript disparaissent à la compilation de votre code. Ils aident votre éditeur et détectent les erreurs dans votre propre code, mais ils ne peuvent pas vous dire qu'une API a envoyé une chaîne là où vous attendiez un nombre.
Un schéma Zod est du vrai code qui s'exécute. Appeler parse sur des données entrantes lève une erreur qui nomme le champ fautif, et z.infer vous donne le type TypeScript à partir du même schéma, si bien que les deux ne divergent jamais. Pour des données venant de l'extérieur de votre application, le schéma est le choix le plus sûr.
Comprendre ce que le convertisseur a déduit
Un champ qui valait null dans votre exemple devient le type null, car l'exemple ne donne aucun autre indice. Changez-le en string | null (ou .nullable() dans Zod) une fois que vous savez ce qu'il contient, ou cochez l'option qui rend les champs null optionnels.
Un tableau vide devient unknown[] pour la même raison. Les dates arrivent en JSON sous forme de chaînes, elles restent donc des chaînes ; dans Zod, vous pouvez en resserrer une en z.string().datetime() ou équivalent une fois le format connu.
Les noms de types viennent des clés : un tableau staff produit Staff, un objet address produit Address. Si deux clés donnent le même nom, un numéro est ajouté.
Collez du JSON dans la zone, ou gardez l'exemple pour voir comment il se comporte.
Définissez le nom du type racine. Chaque objet imbriqué reçoit un nom tiré de sa clé.
Choisissez interface ou type alias, et si les propriétés doivent être readonly.
Copiez le TypeScript, le schéma Zod ou les deux. Les erreurs dans le JSON s'affichent avec le message du parseur.
Collez deux ou trois éléments dans chaque tableau pour que les champs optionnels soient détectés.
Supprimez les valeurs sensibles avant de partager des types générés ; l'outil lui-même n'envoie jamais rien.
Gardez les schémas à côté du code qui récupère les données, et validez à cette frontière, pas au fond des composants.
Utilisez safeParse au lieu de parse quand vous voulez afficher un message convivial plutôt que lever une erreur.
Questions fréquentes
Faut-il utiliser une interface ou un type alias ?
Ici, les deux décrivent tout aussi bien la forme des objets. Les interfaces de même nom fusionnent, ce qui aide pour étendre les types d'une bibliothèque ; les type alias ne fusionnent pas mais peuvent nommer des unions. Choisissez un style pour la base de code et tenez-vous-y.
Comment obtenir le type TypeScript à partir d'un schéma Zod ?
Utilisez type User = z.infer<typeof UserSchema>. La sortie Zod générée inclut déjà cette ligne sous chaque schéma, vous n'avez donc pas à maintenir des interfaces séparées.
Pourquoi un champ est-il typé null ?
Votre exemple contenait null à cet endroit, il n'y avait donc rien d'autre à déduire. Remplacez-le par le vrai type associé à null, par exemple string | null, ou z.string().nullable() dans le schéma.
Mon JSON est-il envoyé à un serveur ?
Non. L'analyse et la génération s'exécutent en JavaScript dans cette page. Vous pouvez charger la page, passer hors ligne, et elle fonctionne toujours.
Utiliser le résultat
Valider une réponse avec le schéma généré
safeParse renvoie un succès ou une liste de problèmes au lieu de lever une erreur, ce qui convient au code fetch qui doit afficher un état d'erreur.
La même forme en interfaces simples
Pratique pour typer des props ou des arguments de fonction quand les données sont déjà fiables.
Collez du JSON, obtenez des types
Collez un exemple de réponse. Le convertisseur écrit côte à côte des interfaces TypeScript et un schéma Zod correspondant, en fusionnant chaque élément d'un tableau pour que les champs absents de certains éléments ressortent optionnels.