Aller au contenu principal
Bethemesh
Développement

JSON vers TypeScript, Zod et JSON Schema

Inférez des interfaces TypeScript, types, schémas Zod ou JSON Schema à partir des objets et tableaux d’un exemple JSON, localement.

  • Presse-papiers
  • Export

Intégrer ce widget

Personnalisez le rendu, vérifiez l’aperçu puis copiez le code.

Aperçu

Type de code d’intégration

Code à copier

Responsive et redimensionné automatiquement par Bethemesh.

Cet outil vous a-t-il été utile ?

Comment fonctionne cet outil ?

Transformez un exemple JSON en interfaces ou types TypeScript, en schémas Zod ou en JSON Schema. Le générateur parcourt les objets imbriqués et tous les éléments des tableaux pour proposer un modèle réutilisable, au lieu de se limiter au premier élément. Vous obtenez une base à relire et à adapter à votre API ; un échantillon ne révèle pas toutes les valeurs que le service pourra renvoyer. L’inférence est effectuée sur votre appareil et le code généré n’est pas exécuté dans le formulaire.

Le moteur identifie chaînes, nombres, booléens, objets, tableaux et null. Des valeurs de types différents conduisent à une union lorsque le contexte le permet. Les nombres TypeScript utilisent number ; une chaîne de date ou d’e-mail reste string, sans règle métier devinée à partir de son apparence. Un tableau vide ne permet pas de connaître son futur contenu et produit un type d’élément inconnu.

Dans un tableau d’objets, les propriétés observées sont regroupées. Un champ absent de certains éléments peut devenir optionnel ; l’option Tout rendre obligatoire remplace ce choix par un contrat plus strict, même si certains exemples fournis ne le respecteraient alors pas. Une propriété présente avec null n’est pas une propriété absente : sa nullabilité et son caractère facultatif sont deux informations différentes.

Choisissez interface ou type pour des déclarations TypeScript, Zod pour du code de validation à intégrer à une application, ou JSON Schema pour un document de schéma. readonly concerne les déclarations TypeScript ; ce n’est pas un gel d’objet à l’exécution. Le code Zod importe zod, que votre projet doit fournir, et place les schémas enfants avant leurs références parentes.

Les cibles partagent l’inférence, sans promettre des comportements identiques dans tous les contextes. TypeScript vérifie du code pendant le développement, pas automatiquement les réponses réseau. Zod nécessite un appel de validation dans votre application. Le JSON Schema généré ferme les objets avec additionalProperties: false ; les clés supplémentaires demandent donc une décision explicite avant intégration.

Comment utiliser cet outil ?

  1. Ajouter un exemple représentatif

    Collez ou importez un JSON valide. Évitez les données personnelles inutiles ; l’inférence a surtout besoin de la structure et des différents types observés.

  2. Choisir le modèle racine et la cible

    Nommez le modèle puis sélectionnez la sortie. Ajustez le traitement des propriétés absentes et readonly lorsque la cible TypeScript le permet.

  3. Relire et intégrer le code produit

    Vérifiez unions, propriétés facultatives et dépendances avant de copier ou exporter. Changer une entrée ou une option masque la précédente génération ; compilez ou validez ensuite dans votre projet.

Cas d'utilisation

Ébaucher des modèles de réponse API

Fournissez des exemples représentatifs avec objets imbriqués, variantes et valeurs nulles. Relisez ensuite les noms proposés et les champs réellement garantis par le fournisseur.

Préparer une validation Zod

Générez des schémas de base puis ajoutez formats, limites et règles de votre application. L’outil ne déduit pas qu’un simple texte doit être une URL valide.

Comparer un contrat à plusieurs échantillons

Placez des objets comparables dans un tableau pour révéler les propriétés présentes seulement dans certains cas. Complétez l’échantillon avec les situations rares connues.

Exemples

Créer deux interfaces pour une réponse imbriquée

Avec le nom racine Response et la cible interface, user devient un modèle User distinct. id est un number et name une string ; aucune valeur concrète n’est figée dans les types.

Entrée

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

Résultat

export interface Response {
  user: User;
}

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

Déclarer les dépendances Zod avant leur utilisation

Avec le nom Root et la cible Zod, ChildSchema précède RootSchema. Le code peut ainsi référencer le schéma enfant sans accéder à une constante avant son initialisation.

Entrée

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

Résultat

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>;

Conseils et bonnes pratiques

  • Incluez les réponses avec champs omis et champs nulls : une seule réponse entièrement remplie masque souvent les propriétés facultatives.
  • Un échantillon ne prouve ni une liste exhaustive de valeurs ni une borne numérique. Ajoutez ces contraintes à partir de la documentation du service.
  • Ne confondez pas readonly avec une protection des données à l’exécution : il s’agit ici d’un contrôle TypeScript.
  • Conservez les grands identifiants comme chaînes si le contrat de votre API les transporte ainsi ; JSON est lu avec les types numériques du navigateur.

Sources et références

Questions fréquentes

Une interface générée valide-t-elle les réponses de mon API ?

Non. TypeScript décrit les valeurs attendues au développement. Pour vérifier une réponse reçue à l’exécution, ajoutez un validateur et utilisez réellement son résultat avant de faire confiance aux données.

Comment sont détectées les propriétés optionnelles ?

Le moteur compare les objets d’un même tableau et repère les clés absentes dans certains éléments. Il ne peut pas déduire l’absence possible d’un champ à partir d’un seul objet qui le contient toujours.

Pourquoi une date ou un e-mail devient-il simplement string ?

L’exemple fournit une chaîne, pas une preuve de sa règle métier. Le générateur évite de transformer arbitrairement une apparence en validation. Ajoutez explicitement les formats et contraintes nécessaires.

Quelle différence avec le générateur JSON Schema autonome ?

Celui-ci propose plusieurs cibles et options de nommage ou de propriétés facultatives. L’outil autonome vise directement un schéma et distingue les entiers observés ; les deux reposent sur la même inférence partagée.

Outils associés

Continuez avec ces outils

Des outils similaires ou complémentaires à celui-ci.

Outils similaires

Générer un JSON Schema

Générez un JSON Schema à partir d’un exemple JSON, localement dans votre navigateur.

DéveloppementUtiliser l’outil

Validateur de schéma JSON

Validez un document JSON avec un schéma et localisez précisément chaque erreur.

DéveloppementMis en avantUtiliser l’outil

Data Faker

Générez des jeux de données fictifs réalistes en JSON, CSV ou SQL.

DéveloppementUtiliser l’outil