JSON vers interfaces TypeScript

Générez des interfaces ou alias de type TypeScript à partir d'un exemple JSON, avec clés facultatives, unions avec null et types imbriqués déduits des tableaux. Gratuit et privé.

Les clés absentes de certains éléments du tableau deviennent facultatives (?), les null deviennent "| null" et les valeurs toujours null deviennent unknown.

S'exécute entièrement dans votre navigateur. Vos données ne sont jamais envoyées.

Outils Connexes

Voir Tout

Qu'est-ce que JSON vers TypeScript ?

Collez une réponse d'API ou un exemple de configuration et obtenez des déclarations TypeScript interface (ou type) prêtes à l'emploi. Les objets imbriqués deviennent des types exportés distincts, les clés absentes de certains éléments d'un tableau deviennent facultatives et les valeurs null deviennent des types union.

Comment utiliser JSON vers TypeScript

  1. Collez un exemple JSON dans Entrée JSON (ou cliquez sur Charger un exemple / Ouvrir un fichier).
  2. Définissez le Nom du type racine (Root par défaut).
  3. Choisissez le Style de sortie : interface ou alias type.
  4. Copiez le code TypeScript généré ou utilisez Télécharger pour l'enregistrer dans un fichier.

Exemple

Entrée
{"id":1,"name":"A","tags":["x"]}
Sortie
export interface Root {
  id: number;
  name: string;
  tags: string[];
}

Quand utiliser JSON vers TypeScript

Utilisez-le pour typer rapidement des réponses fetch, des jeux de test ou des fichiers de configuration. Un seul exemple ne peut pas révéler tous les cas : les enums de chaînes, les unions de formes d'objets ou les dates en chaîne restent de simples types string ou fusionnés ; relisez donc le résultat et affinez-le, ou utilisez un générateur basé sur JSON Schema pour les contrats.

Comment fonctionne JSON vers TypeScript

L'exemple est parcouru récursivement et chaque position collecte les types rencontrés. Les tableaux d'objets sont fusionnés en un seul type : une clé absente de certains éléments devient facultative, une clé nulle quelque part devient nullable, des entiers mêlés à des décimaux deviennent un type à virgule flottante, et tout autre mélange de types se rabat sur un type dynamique. Les objets imbriqués deviennent leurs propres types nommés (PascalCase de la clé, clés de tableau mises au singulier : orders → Order), avec des suffixes numériques en cas de collision de noms. La sortie TypeScript associe entiers et décimaux à number, les chaînes à string, les booléens à boolean, les tableaux à T[], les valeurs nullables à T | null et les valeurs dynamiques à unknown. Les clés qui ne sont pas des identifiants valides sont mises entre guillemets ("first-name": string).

Cas d'utilisation courants

  • Typer une réponse d'API REST avant d'écrire un client
  • Créer des interfaces pour un fichier de configuration JSON
  • Convertir des jeux de test en objets typés
  • Amorcer les types d'une charge utile de webhook tierce

Questions Fréquentes

Pourquoi une propriété est-elle typée unknown ?

Sa valeur était null dans tous les exemples (ou les tableaux étaient vides) : aucun vrai type n'a pu être déduit. Ajoutez un exemple avec une vraie valeur ou modifiez le type à la main.

Comment les propriétés facultatives sont-elles détectées ?

Lorsque la valeur racine ou une clé imbriquée est un tableau d'objets, une clé présente dans seulement certains objets est marquée par ?.

Produit-il une validation à l'exécution ?

Non, il n'émet que des déclarations de types, qui disparaissent à la compilation. Utilisez un validateur, par exemple basé sur JSON Schema, si vous avez besoin de contrôles à l'exécution.

Étapes suivantes conseillées

Explorer d'autres catégories