YamlBox

Article du guide · 6 min de lecture

Générez TypeScript types à partir de JSON qui disent la vérité

L'étape JSON à TypeScript commence généralement par copier une réponse API dans un éditeur et écrire manuellement une interface — une petite tâche qui cache un risque important : les types que vous écrivez décrivent la réponse que vous avez vue, et non les réponses que vos utilisateurs déclencheront.

Mis à jour

JSON à TypeScript : commencez à partir d'une charge utile représentative, pas chanceuse

Un générateur ne peut déduire que ce que montre votre échantillon. Récupère une réponse qui inclut les cas délicats : un enregistrement avec le champ facultatif présent et un sans, un nul, un tableau vide, un décimal. Un bon échantillon bat cinq échantillons propres.

Les champs facultatifs proviennent de tableaux

Étant donné un seul objet, chaque clé semble requise. Étant donné un tableau d'objets, un générateur peut comparer des éléments : une clé manquante dans certains éléments est facultative (key?: string), et une clé présente partout est obligatoire. C'est pourquoi le collage d'une liste d'enregistrements produit des types bien meilleurs que le collage d'un seul enregistrement.

Modèle nul honnêtement

                // One sample with "deleted_at": null and one with a date
interface User {
  id: number;
  deleted_at: string | null;   // not string, not optional
}
              

null et indéfini sont des choses différentes. Un champ nullable est présent avec une valeur nulle ; un champ facultatif peut être totalement absent. Les générateurs qui réduisent les deux produisent des interfaces qui vérifient le type tout en étant erronées – le type d'erreur le plus coûteux, car le compilateur cesse de vous avertir.

Les syndicats battent tous

Lorsqu'un champ est une chaîne dans un enregistrement et un nombre dans un autre (il existe des API compliquées), le type honnête est string | nombre. Le recours à tout ou à un inconnu fait taire le compilateur et pousse l'échec en production. Un générateur qui rapporte le syndicat documente au moins la réalité, et vous pouvez alors demander pourquoi à l'équipe API.

Les types sont au moment de la compilation ; valider au moment de l'exécution

  • TypeScript disparaît au moment de l'exécution. Rien n’empêche une charge utile mal formée d’arriver avec une forme interdite par votre interface.
  • Utilisez des types générés pour décrire ce que vous attendez, ainsi qu'un validateur d'exécution (Zod, Valibot ou un schéma JSON avec AJV) à la limite où les données entrent dans votre application.
  • La génération d'un schéma JSON à partir du même échantillon vous donne la moitié du temps d'exécution : le schéma valide, le document des interfaces.

Conserver les types régénérés et non retapés

Les caractères écrits à la main dérivent du API. Traitez le générateur comme une étape de votre flux de travail : collez une nouvelle réponse, régénérez-la, collez-la dans votre fichier de types et laissez le compilateur vous montrer chaque endroit où le API a été modifié. C'est le détecteur à dérive API le moins cher qui soit — et il coûte trente secondes.

Essayez-le avec le générateur JSON à TypeScript — interface ou sortie de type, clés facultatives détectées, unions préservées.