Générateur d'interfaces TypeScript depuis du JSON en ligne

Ce que fait l’outil

Le générateur JSON vers TypeScript lit un exemple JSON, comme une réponse d’API ou un fichier de configuration, et écrit les interfaces TypeScript qui le décrivent. Au lieu de taper chaque champ à la main, vous collez une vraie réponse et obtenez des types prêts à l’emploi pour les résultats de fetch, l’état Redux ou les données de test.

Le générateur examine chaque valeur, pas seulement la première. Les nombres deviennent number, le texte string, les objets imbriqués ont leurs propres interfaces et les éléments d’un tableau sont fusionnés : un champ présent dans certains éléments seulement est marqué optionnel, et un champ parfois null est typé comme pouvant être nul.

Mode d’emploi

Collez du JSON dans la zone de saisie, importez un fichier .json ou cliquez sur Exemple.
Indiquez le nom du type racine et choisissez le style : interface ou type, null en | null ou en champs optionnels, propriétés readonly et ajout ou non de export à chaque déclaration.
Copiez le TypeScript ou téléchargez-le en fichier .ts.

Un JSON invalide est signalé avec la ligne et la colonne du problème, pour corriger l’exemple tout de suite.

Exemple

Ce JSON :

{ "id": 7, "name": "Ada", "tags": ["admin"], "manager": { "id": 1, "email": null } }

devient ces déclarations :

export interface Root {
  id: number;
  name: string;
  tags: string[];
  manager: Manager;
}

export interface Manager {
  id: number;
  email: null;
}

Astuces

Un seul exemple ne montre que ce qu’il contient. Si un champ peut être une chaîne ou null, incluez un cas de chaque, ou placez plusieurs exemples dans un tableau pour qu’ils soient fusionnés.
Les noms de champ qui ne sont pas des identifiants valides, comme first-name, sont écrits entre guillemets, donc le résultat compile toujours.
Le résultat est un point de départ. Restreignez les champs texte à des unions de littéraux ou à Date quand vous en savez plus que l’exemple.
Besoin de Go ? Le convertisseur JSON vers Go utilise la même inférence pour écrire des structs avec des tags json.

FAQ

› Comment les objets imbriqués sont-ils traités ?

Chaque objet imbriqué devient sa propre interface nommée d'après sa clé en PascalCase, donc un champ address donne une interface Address. Les objets ayant exactement la même structure partagent une interface, et les noms en conflit reçoivent un numéro, comme Address2.

› Comment les tableaux sont-ils typés ?

Tous les éléments d'un tableau sont fusionnés en un seul type d'élément. Un tableau d'objets devient un tableau d'une interface nommée d'après le singulier de la clé, donc orders donne Order[]. Les tableaux mixtes deviennent une union comme (string | number)[] et les tableaux vides deviennent unknown[].

› Quand un champ est-il marqué optionnel ?

Quand il manque dans certains objets d'un tableau. Un champ présent partout mais parfois null s'écrit par défaut T | null ; passez les valeurs null en optionnel pour retirer le null et marquer le champ optionnel avec un point d'interrogation.

› Faut-il choisir interface ou type ?

Les deux décrivent les mêmes formes d'objet. Les interfaces peuvent être étendues et fusionnées, et beaucoup de guides de style les préfèrent pour les types d'objet. Les alias de type sont pratiques si vous comptez combiner le résultat avec des unions ou des types mappés. Choisissez ce qu'utilise votre code.

› Mon JSON est-il envoyé à un serveur ?

Non. Les types sont déduits dans votre navigateur, vous pouvez donc coller de vraies réponses d'API sans crainte.