Aperçu / Développement et code / JSON vers TypeScript
Développement et code 100 % dans le navigateur et hors ligne

JSON vers TypeScript

Collez un JSON d’exemple et obtenez des interfaces ou types TypeScript : les objets imbriqués sont nommés, les clés absentes deviennent facultatives, les valeurs mixtes des unions.

Collez ou saisissez votre entrée ; le résultat s’affiche aussitôt et les erreurs apparaissent dessous.

Vos fichiers et données ne quittent jamais votre navigateur : rien n’est envoyé.

JSON

TypeScript

Les types sont déduits des valeurs collées. Une clé absente de certains éléments d’un tableau devient facultative, les valeurs mixtes forment une union et un tableau vide devient unknown[]. Vérifiez le résultat avec vos données réelles avant de vous y fier.

D’une réponse d’exemple aux types

Le travail avec une API commence presque toujours pareil : vous avez une réponse JSON et il vous faut un type. Collez la réponse à gauche et le TypeScript correspondant apparaît à droite, prêt pour un fichier .ts. Rien à saisir à la main, et une charge à dix niveaux prend autant de temps qu’une à deux niveaux.

De la charge utile à la déclaration

  1. Collez votre JSON dans la zone de gauche ou appuyez sur Exemple pour voir le fonctionnement.
  2. Indiquez le nom du type principal, par exemple User ou ApiResponse.
  3. Choisissez entre interface et type, et cochez export ou lecture seule si nécessaire.
  4. Vérifiez le résultat à droite. Une erreur de syntaxe est signalée à la place des types.
  5. Utilisez Copier ou Télécharger .ts pour récupérer le code.

Comment les types sont déduits

  • Chaînes, nombres, booléens et null deviennent le type TypeScript correspondant.
  • Un objet imbriqué devient sa propre interface, nommée d’après sa clé en PascalCase. La clé shipping_address donne ShippingAddress.
  • Dans les tableaux, tous les éléments sont fusionnés. Une clé présente dans certains seulement est marquée facultative par un point d’interrogation, et des valeurs de natures différentes forment une union comme string | number.
  • Deux objets de forme strictement identique partagent une interface au lieu de produire deux copies.
  • Un tableau vide donne unknown[], un objet vide donne Record<string, unknown>.

Les limites d’une déduction à partir d’un échantillon

Un échantillon ne montre que ce qu’il contient. Un champ toujours renseigné dans votre exemple peut valoir null en production, et un nombre qui ressemble à un identifiant peut être une chaîne ailleurs. Les dates arrivent sous forme de chaînes et sont donc typées string. Considérez le résultat comme un premier jet à affiner à la main, ou validez les réponses réelles à l’exécution si les données ne dépendent pas de vous.

Vos données restent privées

La conversion s’exécute dans la page. Les réponses de production, jetons et données personnelles d’un échantillon collé ne sont envoyés à aucun serveur, vous pouvez donc utiliser des données réelles.

Foire aux questions (FAQ)

Collez le JSON dans la zone de gauche. L’interface apparaît aussitôt à droite. Nommez le type principal, copiez le code et placez-le dans un fichier .ts.