FR

JSON en TypeScript

Collez du JSON et obtenez des interfaces TypeScript ou des alias de type. Les champs optionnels reçoivent un point d'interrogation, les valeurs null ajoutent | null, et les tableaux aux valeurs mélangées deviennent des types union.

Gratuit et privé. Tout se passe dans votre navigateur, rien n'est envoyé.

Comment ça marche

  1. Collez votre JSONCollez une réponse de votre API ou ouvrez un fichier .json. Cliquez sur Exemple pour voir un cas concret.
  2. Réglez les optionsIndiquez le nom du type principal et les options de ce langage. Le code se met à jour pendant que vous tapez.
  3. Copiez ou téléchargezCopiez le code dans votre projet ou téléchargez-le sous forme de fichier.

Des interfaces pour vos réponses d'API

Typer la réponse d'un appel fetch est l'une des tâches les plus courantes dans un projet TypeScript. Collez ici une vraie réponse et vous obtenez une interface par forme d'objet, avec les objets et tableaux imbriqués typés jusqu'au bout. Les clés qui ne sont pas des identifiants valides, comme "Created At" ou "123abc", sont mises entre guillemets pour que le type corresponde toujours aux données.

Choisissez interface ou type, si chaque type est exporté et si les champs sont en lecture seule. Les dates restent des string, car JSON n'a pas de type date et JSON.parse renvoie des chaînes. Un champ qui vaut null dans tous les éléments devient unknown, ce qui oblige le compilateur à vous le faire vérifier avant usage.

Questions fréquentes

Interface ou type, lequel choisir ?

Les deux conviennent pour décrire des objets. Les interfaces peuvent être étendues et fusionnées, les alias de type peuvent aussi décrire des unions. Beaucoup d'équipes utilisent des interfaces pour les modèles d'API, c'est donc le choix par défaut.

Mon JSON est-il envoyé quelque part ?

Non. Les types sont générés dans votre navigateur. Les réponses d'API qui contiennent des données clients ou des clés ne quittent jamais votre appareil.

Comment les champs optionnels sont-ils détectés ?

Si le JSON contient une liste d'objets, chaque objet est comparé aux autres. Un champ absent d'au moins un objet est marqué optionnel. Avec un seul objet, tous les champs sont considérés comme obligatoires.

Que se passe-t-il avec les champs toujours null ?

Leur type ne peut pas être connu à partir de l'exemple, ils reçoivent donc un type général comme unknown, object, Any ou JsonElement. Ajoutez un exemple où le champ a une valeur pour obtenir un type précis.

Pourquoi mon 1.0 est-il typé comme un nombre décimal ?

L'outil regarde comment le nombre est écrit. 1.0 ou 2.5 deviennent double ou float, 1 devient un entier. Si un champ est entier dans certains éléments et décimal dans d'autres, c'est le type décimal qui est utilisé.

Puis-je utiliser le résultat dans du code en production ?

Oui, le code compile tel quel dans les configurations habituelles. Relisez les noms et les types avant de le valider, car un exemple ne montre jamais toutes les valeurs possibles.

Est-ce que ça fonctionne hors ligne ?

Oui. Après une première visite de la page, l'outil continue de fonctionner sans connexion internet.