JSON en TypeScript
Transformez un exemple de document JSON en interfaces ou alias de type TypeScript, avec champs optionnels et unions déduits de vos données.
Fonctionne entièrement dans votre navigateur
Les types sont déduits de l'exemple que vous collez : ils décrivent cet exemple et non un schéma. Un champ qui est une chaîne dans votre exemple peut être un nombre ailleurs. Tous les nombres deviennent number, et les dates restent string. L'ordre des propriétés suit JSON.parse, qui place en premier les clés qui sont des nombres entiers.
Comment générer du TypeScript à partir de JSON
- Collez une réponse ou un fichier JSON dans la zone de saisie. Plusieurs éléments dans un tableau donnent un meilleur résultat, car les champs absents de certains éléments deviennent optionnels.
- Indiquez le nom du type de premier niveau, choisissez
interfaceoutype, et cochez export, readonly ou la détection des champs optionnels selon vos besoins. - Copiez les déclarations ou téléchargez-les en fichier
.ts. Relisez les noms, car ils viennent de vos noms de clés.
Déduire des types à partir d'un exemple JSON
Convertir du JSON en TypeScript revient à écrire la forme des données. Les types TypeScript décrivent cette forme, et une réponse JSON en contient déjà une : chaque clé, le genre de valeur qu'elle porte et la façon dont les objets s'imbriquent. Le convertisseur parcourt l'exemple et transcrit cette forme en déclarations, pour que vous n'ayez pas à taper quarante champs à la main avant d'appeler une API en toute confiance.
L'étape la plus importante concerne les tableaux. Chaque élément d'un tableau d'objets est lu, et leurs formes sont fusionnées : une clé présente dans tous les éléments reste obligatoire, une clé présente dans certains seulement devient optionnelle, et les valeurs de natures différentes deviennent une union. C'est pourquoi un exemple avec plusieurs enregistrements donne de bien meilleurs types qu'un exemple avec un seul. Une valeur null est traitée différemment d'une clé absente, car les deux n'ont pas le même sens pour le code qui lit le champ.
Les types déduits sont un point de départ, pas un contrat. Ils ne peuvent pas savoir qu'une chaîne prend toujours l'une de trois valeurs, qu'un nombre est en réalité un identifiant entier, ou qu'un champ présent dans tous vos exemples peut disparaître en production. Relisez le résultat, renommez ce qui est sorti maladroitement et resserrez les types qui comptent.
Astuces
- Vérifiez d'abord que votre exemple est bien formé avec Formater et valider du JSON, qui indique le caractère exact d'une erreur de syntaxe.
- Vous travaillez plutôt avec une config YAML ? Convertissez-la avec Convertir YAML en JSON et collez le résultat ici.
- Besoin de regarder le contenu d'un jeton avant de le typer ? Décodez-le avec le Décodeur JWT.
Questions fréquentes
Comment l'outil décide-t-il qu'un champ est optionnel ?
Quand vous avez un tableau d'objets, ces objets sont fusionnés en une seule forme. Une clé présente dans certains éléments mais pas dans tous reçoit un ?. Une clé présente mais qui vaut null dans certains éléments n'est pas optionnelle : elle devient T | null. Désactivez la détection des champs optionnels si vous préférez que toutes les clés soient obligatoires.
Comment les types imbriqués sont-ils nommés ?
Chaque objet imbriqué est nommé d'après sa clé en PascalCase : billing_address devient BillingAddress. Pour un tableau, le type des éléments perd un « s » final quand la clé fait plus de 3 lettres et ne se termine pas par ss, us ou is : users donne User, tandis que address donne AddressItem. Si deux formes différentes veulent le même nom, la seconde est numérotée, ce qui donne User et User2. Ces règles de pluriel sont celles de l'anglais.
Que deviennent les objets de même forme ?
Ils partagent une seule déclaration. Si billing et shipping contiennent tous deux { street, city }, vous obtenez une seule interface, nommée d'après le premier endroit où elle apparaît. Deux objets avec les mêmes clés mais des types de valeurs différents sont des formes différentes et reçoivent des noms distincts.
Pourquoi un tableau vide est-il typé unknown[] ?
Un tableau vide ne contient aucun exemple : rien ne peut être déduit sur ses éléments. unknown[] est la réponse honnête ; modifiez-la à la main une fois que vous connaissez le type des éléments. Un tableau qui mélange les valeurs devient une union, comme (string | number)[].
Le résultat peut-il différer de l'API réelle ?
Oui. Un exemple ne montre que les valeurs qu'il contient. Un champ toujours présent dans votre exemple mais parfois absent en production sera obligatoire ici, et une chaîne de type énumération sera un simple string. Pour une validation stricte, utilisez un schéma ; pour démarrer vite, utilisez ce résultat et ajustez-le.
Mon JSON est-il envoyé sur un serveur ?
Non. Rien de ce que vous collez n'est envoyé nulle part : la conversion s'exécute dans votre navigateur, et vous pouvez vous déconnecter du réseau une fois la page chargée.