Convertisseur JSON vers types TypeScript

Collez un objet JSON (ou un tableau JSON) pour générer automatiquement les interfaces/types TypeScript correspondants.

Astuces d'utilisation

  • Lorsque tous les éléments d'un tableau sont des objets, leurs clés sont fusionnées en une seule interface. Les clés absentes de certains éléments sont automatiquement traitées comme optionnelles (`?`).
  • Le nom du type racine est "Root" par défaut, mais vous pouvez le remplacer par celui de votre choix (par exemple `User`, `ApiResponse`). Les noms d'interface des objets imbriqués sont générés automatiquement à partir du nom de leur propriété.
  • Collez directement un exemple de réponse JSON de votre API pour obtenir rapidement une ébauche des types à utiliser dans votre code frontend.
  • Le résultat généré n'est qu'une ébauche de type déduite de la structure. Il est recommandé de la vérifier manuellement par rapport à la spécification réelle de l'API (champs nullable, obligatoires, etc.) avant de l'utiliser.

Questions fréquentes

Rédiger les définitions de types à la main à partir d'un exemple de réponse d'API prend du temps et favorise les erreurs, comme une faute de frappe dans un nom de clé ou un type oublié. La génération automatique fait gagner beaucoup de temps aux développeurs frontend et évite ce type d'erreurs.

Les clés de tous les éléments du tableau sont fusionnées ; les clés présentes uniquement dans certains éléments sont automatiquement traitées comme des propriétés optionnelles (`?`). Si une même clé a des types différents selon les éléments, elle est représentée sous forme de type union (par exemple `string | number`).

Les définitions générées sont déduites de façon purement mécanique à partir de la structure de l'exemple JSON. Des informations comme le caractère nullable d'un champ ou l'ajout possible de nouveaux champs à l'avenir ne peuvent pas être déterminées à partir du seul JSON d'exemple ; il est donc recommandé de les vérifier par rapport à la documentation de l'API et de les ajuster manuellement.

Le nom d'interface d'un objet imbriqué est généré automatiquement à partir du nom de la propriété qui le contient (par exemple, un objet sous la clé `profile` devient une interface nommée `Profile`). Si une interface de même nom mais de forme différente est nécessaire, un numéro est ajouté à la fin pour les distinguer.
ツールくん

Anecdote — Le problème de "dérive des types" que résolvent les outils d'inférence

TypeScript est un langage qui permet de détecter des bugs dès la compilation grâce au typage statique, mais le compilateur TypeScript ne peut rien savoir de la forme des données JSON reçues d'une API externe tant qu'un développeur ne les a pas définies manuellement. Chaque fois que la spécification de l'API et la réponse réelle divergent, ou qu'un champ est ajouté ou supprimé, il faut mettre à jour les définitions de types à la main — cet écart entre "ce que disent les types" et "ce que l'API renvoie réellement" est un casse-tête récurrent dans de nombreux projets frontend.

Un outil de conversion JSON vers TypeScript s'attaque à ce problème en déduisant mécaniquement les types à partir d'un véritable exemple de réponse JSON, ce qui accélère considérablement ce travail. Un outil bien connu dans ce domaine est quicktype, un projet open source capable de générer des définitions de types pour plusieurs langages, réputé pour prendre en charge de nombreux formats d'entrée, dont JSON Schema et les schémas GraphQL.

La difficulté de l'inférence de types tient au fait que le JSON lui-même ne contient aucune information indiquant si un champ est toujours présent ou s'il pourrait devenir null à l'avenir. Les définitions générées automatiquement ne constituent donc jamais une solution complète : la pratique courante consiste à les considérer comme une simple ébauche reflétant la structure de cet échantillon précis, à confronter et ajuster par rapport à la spécification réelle de l'API.

Plus d'outils dans cette catégorie