Convertisseur JSON vers types TypeScript

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

Produire des types TypeScript à partir de JSON

La première chose dont on a besoin pour exploiter une réponse d'API en TypeScript est une définition de types. Écrire un `interface` à la main en scrutant un JSON profondément imbriqué est fastidieux, et **c'est précisément le genre de tâche où l'on oublie une propriété ou se trompe de type.** Collez ici le JSON : cet outil produit l'`interface` ou le `type` correspondant.

Le générateur déduit les types TypeScript des types que les valeurs possèdent en JavaScript. **Les objets imbriqués sont extraits sous forme d'interfaces distinctes** et les tableaux prennent le type de leurs éléments sous la forme `T[]`. Vous pouvez nommer librement le type racine, de sorte que la sortie se colle telle quelle dans votre projet. **La déduction reposant entièrement sur l'échantillon collé, les propriétés susceptibles d'être omises et les champs susceptibles d'être nuls sont à ajouter ensuite** au moyen de `?` ou d'une union. Tout s'exécute dans votre navigateur.

Comment produire les types

  1. Collez le JSON Saisissez une réponse d'exemple telle quelle. Un objet comme un tableau conviennent.
  2. Nommez le type racine Ce sera le nom de l'interface de plus haut niveau. La valeur par défaut suffit si vous n'avez pas de préférence.
  3. Examinez la sortie Les objets imbriqués apparaissent extraits sous forme d'interfaces distinctes.
  4. Ajoutez vous-même les champs optionnels **Ce qui n'apparaît pas dans l'échantillon ne peut être déduit.** Ajoutez `?` et `| null` là où il le faut.
  5. Copiez-le dans votre projet Le résultat se colle directement dans un fichier `.ts`.

Astuces pour en tirer le meilleur parti

  • 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.

Dans quels cas cela sert

Typer une API externe

Même lorsqu'une API ne fournit aucune définition de types, un exemple de réponse offre un point de départ.

Typer un fichier de configuration JSON existant

Pour lire une configuration en toute sûreté de typage, la structure se transpose directement en type.

Déduire des types à partir de données factices

Quand on construit d'abord l'interface, on peut produire des types à partir de données provisoires.

Contrôler un type écrit à la main

Comparez un type que vous avez rédigé au type produit pour repérer ce qui manque.

Les termes de TypeScript expliqués

interface
Une déclaration décrivant la forme d'un objet. **Déclarer plusieurs fois le même nom les fusionne automatiquement**, et c'est ce qui la distingue d'un alias de type.
Alias de type
Une déclaration donnant un nom à n'importe quel type. Elle peut nommer des unions et des types primitifs, ce qu'une interface ne permet pas.
Propriété optionnelle
Un champ marqué d'un `?`, comme `name?: string`. **Il ne peut être déduit d'un échantillon collé.**
Type union
Un type tel que `string | null`, exprimant qu'une valeur peut relever de l'un de plusieurs types.
Objet imbriqué
Une structure dont la valeur est elle-même un objet. Cet outil l'extrait sous forme d'interface distincte.
Inférence de type
Le fait de déduire un type d'une valeur. **L'inférence repose ici sur l'unique échantillon collé, qui n'est pas nécessairement la spécification réelle de l'API.**

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.
Tool-kun

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.