JSON en TypeScript

Comment ça marche

Pour utiliser avec des types les données d'une API en TypeScript, il faut une interface pour la réponse ; l'écrire à la main prend du temps et on oublie vite un champ. Collez une réponse d'exemple à gauche et saisissez un nom de type racine (par exemple Client) : les déclarations apparaissent à droite. Chaque objet imbriqué reçoit sa propre interface : le champ adresse devient le type Adresse, et un tableau d'objets prend le singulier de son nom (« commandes » → Commande[]). Si le JSON commence par un tableau, le type racine décrit un élément et une ligne RootList = Root[] est ajoutée. Toutes les entrées d'un tableau sont fusionnées en un type : un champ absent d'une entrée reçoit ? (email?: string), un champ qui valait null quelque part reçoit | null (derniere_commande: string | null). Un champ aux types différents devient une union (string | number). Les noms de propriétés reprennent exactement les clés du JSON, car un type TypeScript ne peut pas renommer les données : nom_complet reste nom_complet, et un nom qui n'est pas un identifiant valide, comme « nom-complet », est mis entre guillemets. Un tableau vide n'a pas de type d'élément connu et s'écrit unknown[].

Cet outil est aussi connu sous le nom de json en typescript, json to typescript, json to ts interface, convertir json en typescript.

Qu'est-ce que Interface TypeScript ?

En TypeScript, une interface décrit les champs d'un objet et leurs types : interface Adresse { ville: string; code_postal: string; }. Le compilateur s'en sert pour repérer, avant l'exécution, les noms de champs mal écrits, les champs manquants et les erreurs de type. La déclaration disparaît à la compilation et n'existe pas dans le JavaScript produit : elle ne vérifie donc jamais les données à l'exécution, elle avertit seulement le développeur.

Qu'est-ce que Champ optionnel ou nullable ?

Un champ optionnel (email?: string) peut être absent de l'objet ; le lire donne undefined. Un champ nullable (derniere_commande: string | null) est toujours présent, mais sa valeur peut être null. En JSON, les deux se voient différemment : dans un cas la clé manque, dans l'autre on lit « derniere_commande »: null. L'outil les marque séparément, car le code doit les traiter par des vérifications différentes.

Quelle est la différence entre interface et type en TypeScript ?

Pour décrire la forme d'un objet, interface et type donnent le plus souvent le même résultat. Une interface s'étend avec extends, et une seconde déclaration du même nom fusionne avec la première, ce qui est pratique pour ajouter des champs aux types d'une bibliothèque. Un type peut exprimer des unions (string | number), des intersections et des alias, mais ne se déclare pas deux fois sous le même nom. Les deux conviennent aux réponses d'API ; choisissez celui que le style de code de votre équipe utilise déjà.

Champs absents, null et unions : comment le type est déduit

L'outil déduit à partir d'un seul exemple ; plus l'exemple montre de variantes, plus le type est juste. Les entrées d'un tableau sont fusionnées, et deux questions distinctes sont posées pour chaque champ : est-il présent dans chaque entrée, et a-t-il déjà valu null ? Si la réponse à la première est non, le champ est optionnel (?) ; si la réponse à la seconde est oui, | null est ajouté. Ce n'est pas la même chose : email?: string dit que le champ peut manquer, derniere_commande: string | null dit qu'il arrive toujours mais peut être vide.

Si un champ montre des types différents, une union est écrite : un champ qui vaut 5 dans une entrée et « 5 » dans une autre devient string | number. C'est souvent le signe d'une incohérence de l'API ; vérifiez sa documentation avant de restreindre le type. Un champ qui n'a jamais valu que null n'a pas de type connu et s'écrit null.

• [{"a":1},{"b":2}] → a?: number; b?: number;
• {"x": null} et {"x": "y"} → x: string | null
• {"n": 5} et {"n": "5"} → n: string | number
• {"nom-complet": "x"} → "nom-complet": string

interface ou type, et limites honnêtes

Pour décrire la forme d'un objet, les deux font le même travail. Une interface s'étend avec extends et fusionne avec une seconde déclaration du même nom, ce qui aide à compléter les types d'une bibliothèque. Un type partage son écriture avec les unions (A | B), les intersections et les alias ; si votre équipe écrit tout avec type, choisissez-le. Dans les deux cas, la sortie commence par export et s'importe depuis un autre fichier.

Limites honnêtes : les dates en texte (« 2026-09-20 ») ne deviennent pas des Date et les listes de valeurs fixes (« actif » | « inactif ») ne deviennent pas des unions littérales ; elles restent string, à restreindre à la main. Deux objets imbriqués de même forme peuvent être écrits deux fois sous des noms différents. Un type TypeScript ne vérifie pas les données à l'exécution ; pour être sûr qu'une API renvoie cette forme, il faut une bibliothèque de validation comme zod.

Questions fréquentes

Comment créer une interface TypeScript à partir d'un JSON ?

Collez un JSON d'exemple dans le panneau de gauche de cette page et saisissez le nom du type racine. À droite apparaissent des déclarations TypeScript commençant par export, avec une interface par objet imbriqué. Copiez le code dans un fichier .ts de votre projet pour typer les données.

Que signifient les champs avec un point d'interrogation (?) ?

Ce champ manque dans certaines entrées du tableau. En TypeScript, ? indique que le champ peut être absent : il faut le vérifier avant de l'utiliser. Si vous êtes sûr qu'il est toujours présent, réglez Champs absents sur Obligatoire : aucun ? ne sera ajouté.

Pourquoi les noms de propriétés ne passent-ils pas en camelCase ?

Un type TypeScript ne modifie pas les données, il décrit seulement leur forme. Si la clé JSON est nom_complet, la propriété du type doit aussi s'appeler nom_complet, sinon le compilateur attendrait un champ absent des vraies données. Pour d'autres noms, renommez dans le code qui lit les données.

Le JSON collé est-il envoyé à un serveur ?

Non. La déduction des types et l'écriture du code TypeScript se font entièrement dans votre navigateur ; même une réponse d'exemple avec des données clients ne quitte pas cette page. Une fois chargée, la page fonctionne hors connexion.