JSON vers TypeScript

Téléverser

Interface TypeScript

Entrez JSON sur la gauche pour commencer la conversion

Prêt

Convertisseur en ligne gratuit de JSON vers TypeScript. Déduit automatiquement le JSON en déclarations d'interface TS standard. Prend en charge les interfaces imbriquées, les unions, les champs optionnels et readonly, options d'indentation 2/4 espaces, 100% dans le navigateur.

Recommandations connexes

Convertisseur SQL

Formatage JSON

JSON vers CSV

JSON vers YAML

Requête JSONPath

Formateur SQL

À propos de JSON vers TypeScript : transformer les données JSON en types TS automatiquement

JSON vers TypeScript est le processus de conversion de données au format JSON (objets ou arrays JSON) en déclarations d'interface TypeScript. JSON (JavaScript Object Notation) est le format de données standard pour les API REST, les fichiers de configuration et les logs, tandis que TypeScript est un sur-ensemble statiquement typé de JavaScript. Dans le développement quotidien, écrire des interfaces TS à la main à partir du JSON de l'API est sujet aux erreurs et consommateur de temps ; cet outil automatise ce flux de travail.

Au cœur de l'outil, il déduit la structure d'un objet JSON et émet une interface TypeScript. Chaque clé d'objet devient une propriété d'interface ; le type littéral de chaque valeur est mappé à son équivalent TS : les chaînes deviennent `string`, les nombres `number`, les booléens `boolean`, null devient `null`, les arrays deviennent `T[]`, et les objets imbriqués deviennent des sous-interfaces indépendantes.

L'inférence de types est le cœur de JSON vers TypeScript. JSON n'a que six types primitifs (null, boolean, number, string, array, object), tandis que le système de types de base de TypeScript inclut string, number, boolean, null, undefined, any, unknown, void, never, object, Array, T[], les types union (A | B) et plus. La fonction getTsType de l'outil mappe chaque valeur selon son typeof et sa forme : typeof null est mappé à `null` ; typeof undefined à `undefined` ; typeof boolean à `boolean` ; typeof number à `number` ; typeof string à `string` ; Array.isArray() déclenche la gestion des arrays.

La gestion des objets imbriqués est une capacité clé. Lorsque le JSON contient des objets imbriqués, l'outil génère récursivement des sous-interfaces indépendantes pour éviter la duplication. Par exemple, `address: { street, city }` produit une sous-interface RootAddress, et l'interface principale la référence via `address: RootAddress`. Les noms des sous-interfaces suivent la convention nom du parent + nom du champ en PascalCase.

L'inférence de types d'array a trois modes. Premièrement, les arrays vides retombent sur `any[]` car il n'y a pas de type d'élément à inspecter. Deuxièmement, lorsque tous les éléments partagent le même type, le résultat est `T[]` (par exemple, `string[]` ou `User[]`). Troisièmement, lorsque les types d'éléments diffèrent, le résultat est un array d'union `(A | B)[]` (par exemple, `(string | number)[]`).

Les champs optionnels (?) sont importants en TypeScript strict mode. Lorsque l'option est activée, l'outil analyse la valeur de chaque champ ; s'il voit null ou undefined, il ajoute `?` à ce champ dans l'interface, par ex. `name?: string` signifie que le champ peut être manquant. Ceci est inestimable pour les API backend qui renvoient des champs optionnels. Les champs readonly mettent l'accent sur l'immuabilité, produisant du code comme `readonly id: number` pour la configuration, les instantanés d'état ou les DTOs.

interface vs type alias est un choix courant pour les utilisateurs de TypeScript. L'outil génère des interfaces car c'est la façon standard de décrire la forme d'un objet : elles prennent en charge la fusion de déclarations, le mot-clé implements et l'héritage extends. Les type aliases brillent pour les types union et intersection et les signatures de fonction, mais pour les types d'objet interface est le choix préféré.

La conversion en temps réel est une fonctionnalité pratique. L'outil convertit 400ms après l'arrêt de la saisie, sans qu'il soit nécessaire de cliquer sur un bouton. Combiné à la coloration syntaxique TypeScript de CodeMirror, les utilisateurs peuvent voir immédiatement l'interface générée et itérer rapidement. Cette boucle de rétroaction accélère considérablement la conception des types.

L'auto-réparation des erreurs JSON augmente la résilience de l'outil. Le JSON du monde réel a souvent des virgules de fin, des guillemets simples, des guillemets manquants ou des commentaires. La routine intégrée tryFixJSON se déclenche lorsque JSON.parse échoue et tente de corriger les erreurs courantes.

Le traitement purement côté client est la décision architecturale centrale. Toute l'analyse JSON, l'inférence de types et la génération d'interface s'exécutent en JavaScript du navigateur ; rien n'est jamais envoyé à un serveur. Les deux avantages clés : premièrement, le JSON peut contenir des données sensibles (clés API, tokens, enregistrements d'utilisateurs) et le traitement local élimine tout risque de fuite ; deuxièmement, la vitesse de conversion n'est limitée que par le CPU de l'appareil.

Cas d'utilisation

Convertissez rapidement les réponses JSON d'API REST ou GraphQL en interfaces TS pendant le développement frontend, en évitant d'écrire manuellement les définitions de types.
Générez des types TS pour les Props, State et paramètres de composants React/Vue/Angular à partir de JSON d'échantillon en quelques secondes.
Partagez les types entre frontend et backend dans un projet TypeScript full-stack, en utilisant le JSON mock du backend comme source unique de vérité.
Générez des interfaces TypeScript lors de l'intégration d'API tierces (livraison, météo, paiement) sans lire de documentation longue.
Ingénierie inverse des définitions de types à partir de données mock, fixtures de test ou fichiers de configuration JSON pour renforcer la sécurité des types et les hints IDE.
Convertissez les exports JSON Schema d'ORM de bases de données en interfaces TypeScript pour les définitions DTO backend Node.js.
Apprenez TypeScript en convertissant du JSON existant en exemples d'interface pour comprendre les types imbriqués, les unions et les champs optionnels.
Refactorez des object literals JS dispersés en interfaces formelles pour améliorer la lisibilité du code et la sécurité des types.

Comment utiliser

Collez du JSON dans l'éditeur de gauche, cliquez sur Télécharger pour sélectionner un fichier .json/.txt, ou cliquez sur Échantillon pour charger l'exemple intégré.
Cliquez sur le bouton du nom d'interface à droite de la barre d'outils (ou l'icône engrenage) pour renommer l'interface racine (par défaut Root) et basculer les champs optionnels/readonly.
L'outil convertit automatiquement avec un debounce de 400ms. Visualisez l'interface TypeScript générée à droite avec la coloration CodeMirror.
Basculez entre l'indentation à 2 et 4 espaces depuis la barre d'outils et ajustez la division entre les panneaux gauche et droit pour une meilleure visualisation.
Cliquez sur Copier pour mettre le code TS dans le presse-papiers, ou cliquez sur Télécharger pour l'enregistrer comme fichier `${interfaceName}.ts` (par ex. User.ts).
Collez le code dans le répertoire `types/` ou `src/types/` de votre projet et importez-le où nécessaire.

Fonctionnalités

Inférence intelligente des types : reconnaît automatiquement null, boolean, number, string, array et object et les mappe aux types TS natifs.
Expansion des objets imbriqués : chaque objet imbriqué devient sa propre sous-interface (par ex. RootAddress) pour une hiérarchie de types propre et sans duplication.
Intelligence des types d'array : les arrays homogènes deviennent `T[]`, les arrays de types mixtes deviennent des unions `(A | B)[]`, les arrays vides retombent sur `any[]`.
Marquage des champs optionnels : lorsqu'il est activé, les champs null ou undefined reçoivent le modificateur `?`, produisant un code compatible avec TypeScript strict mode.
Prise en charge des champs readonly : lorsqu'il est activé, chaque champ reçoit le modificateur `readonly`, idéal pour l'état immuable, la configuration et les DTOs.
Nom d'interface personnalisé : le nom de l'interface racine est configurable (par défaut Root) et le fichier téléchargé est nommé d'après lui (par ex. User.ts).
Options d'indentation 2/4 espaces : basculer entre l'indentation à 2 espaces (par défaut ESLint) et 4 espaces depuis la barre d'outils.
Conversion automatique en temps réel : l'outil convertit 400ms après l'arrêt de la saisie, prenant en charge le collage, le téléchargement de fichier et le chargement d'échantillon.
Auto-réparation des erreurs JSON : la routine intégrée tryFixJSON gère automatiquement les virgules de fin, les guillemets simples et les guillemets manquants.
Coloration syntaxique TypeScript : l'éditeur de droite utilise CodeMirror avec l'extension de langage TypeScript pour une coloration claire.
Copier et télécharger : copiez le résultat dans le presse-papiers en un clic ou enregistrez-le comme fichier .ts standard prêt pour votre projet.
100% dans le navigateur : toute l'analyse, l'inférence et la génération d'interface se font en JavaScript côté client ; le JSON d'origine ne quitte jamais votre appareil.

FAQ

Comment convertir du JSON en interface TypeScript ?

Collez votre JSON dans l'éditeur de gauche et l'outil déduit automatiquement le type de chaque champ (string, number, boolean, array, object, etc.) et génère une interface TypeScript standard. Les objets imbriqués sont extraits en sous-interfaces séparées. La conversion s'exécute automatiquement 400ms après l'arrêt de la saisie.

L'outil génère-t-il des type aliases ou des interfaces ?

Cet outil génère exclusivement des déclarations d'interface TypeScript (pas de type aliases). Les interfaces sont la façon standard de décrire la forme d'un objet en TypeScript : elles prennent en charge la fusion de déclarations (declaration merging) et le mot-clé implements.

Comment marquer les champs comme optionnels ?

Activez "Champs optionnels (?)" dans le panneau des paramètres. L'outil analyse la valeur de chaque champ et, lorsqu'il trouve null ou undefined, ajoute automatiquement le modificateur `?` à l'interface. Par exemple, `name?: string` signifie que le champ peut être manquant.

Comment générer des champs readonly ?

Activez "Champs readonly" dans le panneau des paramètres. Chaque champ reçoit le modificateur `readonly`, par exemple `readonly id: number`. Cela met l'accent sur l'immuabilité et est idéal pour la configuration, les instantanés d'état ou les définitions DTO.

Comment l'outil gère-t-il les arrays ?

L'outil analyse les types d'éléments de chaque array. Lorsque tous les éléments partagent le même type, il émet `T[]` (par exemple, `string[]`) ; lorsque les types diffèrent, il émet un array d'union `(A | B)[]` (par exemple, `(string | number)[]`) ; lorsque l'array est vide, il retombe sur `any[]`.

Un objet imbriqué devient-il sa propre interface ?

Oui. Chaque objet imbriqué devient sa propre sous-interface nommée en combinant le nom de l'interface parente avec le nom du champ en PascalCase. Par exemple, une interface Root contenant un objet `address` produit Root et RootAddress.

Puis-je personnaliser le nom de l'interface ?

Oui. Cliquez sur le bouton du nom d'interface à droite de la barre d'outils (ou ouvrez la boîte de dialogue des paramètres) pour renommer l'interface racine (la valeur par défaut est Root). Le fichier .ts téléchargé sera également nommé avec cette valeur.

Le fichier .ts téléchargé peut-il être utilisé directement dans un projet ?

Oui. Le code généré suit les meilleures pratiques de TypeScript, inclut des définitions de types complètes, des interfaces imbriquées et des types d'union, et peut être collé tel quel dans des projets React, Vue, Angular ou Node.js.

Que se passe-t-il si mon JSON échoue à l'analyse ?

Lorsque le JSON contient des virgules de fin, des guillemets manquants ou des guillemets simples au lieu de doubles, l'outil appelle automatiquement tryFixJSON pour tenter une réparation. Si la réparation réussit, vous serez notifié ; sinon, le panneau de droite affiche l'emplacement exact de l'erreur.

Quelles structures JSON sont prises en charge ?

Tout JSON valide est pris en charge : primitifs (null, boolean, number, string), arrays de toute profondeur, objets imbriqués à toute profondeur et arrays de types mixtes (qui deviennent des types d'union). Les entrées invalides comme les fonctions, les Symbols ou les valeurs undefined ne font pas partie de la spécification JSON et ne sont pas acceptées.

Puis-je choisir la taille de l'indentation ?

Oui. Un menu déroulant dans la barre d'outils de droite vous permet de basculer entre l'indentation à 2 et 4 espaces. Deux espaces correspondent à la valeur par défaut d'ESLint/Prettier ; quatre espaces conviennent aux projets qui préfèrent une indentation plus large.

En quoi cela diffère-t-il de JSON Schema ou Zod ?

JSON Schema est idéal pour la validation de données à l'exécution (limites d'API, validation d'entrée utilisateur). Zod et yup sont des validateurs à l'exécution conviviaux pour TypeScript qui peuvent dériver des types TS à partir d'un schéma. Cet outil est un générateur léger de définitions de types pures ; il n'effectue pas de vérifications à l'exécution, se concentre sur le typage statique frontend, est plus rapide et n'a aucune dépendance.

Dépannage

L'interface générée semble incorrecte. Que dois-je faire ?

Causes courantes : échec d'analyse JSON, mauvaise identification d'objets imbriqués ou inférence de type d'array incorrecte. Essayez ces étapes : 1) Validez le JSON avec un formateur JSON ; 2) Pour les objets imbriqués, vérifiez les références de sous-interface ; 3) Pour les arrays, confirmez que les types d'éléments sont cohérents ; 4) Régénérez ou éditez manuellement la sortie.

Le fichier .ts téléchargé ne compile pas dans mon projet.

Causes probables : 1) tsconfig.json n'a pas le strict mode mais le code généré utilise readonly ; 2) le nom de l'interface est en conflit avec un type existant ; 3) un nom de champ est un mot-clé TypeScript (comme class ou type). Solution : ajustez le strict mode, renommez l'interface ou citez le champ en conflit (par ex. "class" : string).

Le JSON contient des arrays imbriqués mais le type inféré est incorrect.

L'outil gère les arrays multidimensionnels (par ex. [[1, 2], [3, 4]]) récursivement et produit number[][]. Si les types d'éléments d'array imbriqué diffèrent, l'outil émet ((A | B)[])[] . Les arrays vides deviennent toujours any[] car il n'y a pas de type d'élément à déduire.

Les valeurs null sont mappées au type `null` au lieu de champs optionnels.

Par défaut, l'outil mappe les valeurs JSON null au type `null` de TS (par ex. middleName : null). Pour produire des champs optionnels : 1) activez l'option Champs optionnels (recommandé) ; 2) supprimez les valeurs null du JSON pour que le champ soit manquant ; ou 3) après la génération, changez manuellement `null` en `string | null` ou utilisez `?`.

Le nom de l'interface et le nom du fichier téléchargé ne correspondent pas.

Les deux sont pilotés par la même valeur, le paramètre Nom de l'interface (par défaut Root). Le fichier téléchargé est nommé `${interfaceName}.ts`. S'ils semblent désynchronisés, vérifiez si l'outil est ouvert dans plusieurs onglets avec des paramètres différents. Rouvrez la page ou actualisez les paramètres pour les aligner.

Le code généré est plein de types `any`.

Causes probables : 1) le JSON contient des valeurs que l'analyseur n'a pas pu reconnaître ; 2) les arrays sont vides et retombent donc sur any[] ; 3) les champs sont null et l'option optionnel est désactivée. Solution : vérifiez l'intégrité des données, ajoutez plus de données d'échantillon pour améliorer l'inférence ou spécifiez manuellement les types pour les champs toujours vides (par ex. User[]).

Comment fusionner l'interface générée avec un type existant ?

Les interfaces TypeScript prennent en charge la fusion de déclarations : les interfaces de même nom fusionnent automatiquement leurs membres. Déclarez simplement une interface de même nom dans votre projet et exportez-la ; par exemple, l'outil émet `export interface User { id : number }` et vous écrivez `export interface User { name : string }`, et elles fusionnent en `{ id : number ; name : string }` automatiquement.

Glossaire

JSON (JavaScript Object Notation): Format léger d'échange de données basé sur la syntaxe d'objets JavaScript mais indépendant de tout langage de programmation. Prend en charge six types de base : objet ({}), array ([]), string, number, boolean et null.
TypeScript: Sur-ensemble de JavaScript développé par Microsoft qui ajoute des définitions de types statiques, des interfaces, des génériques et d'autres fonctionnalités. Le code TypeScript est compilé en JavaScript pur et s'exécute dans le navigateur ou sur Node.js.
interface: Mot-clé TypeScript qui décrit la forme d'un objet. Syntaxe : `interface Name { prop: type; }`. Prend en charge la fusion de déclarations, le mot-clé implements et l'héritage extends.
type alias: Mot-clé TypeScript qui attribue un nom à un type. Syntaxe : `type Name = ...`. Utile pour les types union, intersection et les types de fonction. Cet outil émet exclusivement des interfaces.
Inférence de types: Le processus par lequel cet outil décide du type TS pour chaque valeur JSON selon son typeof et sa forme.
Champ optionnel (?): Modificateur TypeScript qui marque un champ comme pouvant être absent. `name?: string` signifie que le champ name peut ne pas exister. Lorsque l'option de champ optionnel de l'outil est activée, les champs dont la valeur est null ou undefined reçoivent automatiquement le modificateur `?`.
Champ readonly: Modificateur TypeScript qui marque un champ comme immuable après la création de l'objet. `readonly id: number` signifie que id ne peut pas être réassigné.
Type union: Type TypeScript qui permet à une valeur d'être l'un de plusieurs types. Écrit comme `A | B`. L'outil utilise cette notation lorsque les éléments d'array ont des types différents.
Type array: Syntaxe TypeScript pour les arrays, disponible en deux formes : la forme générique `Array<T>` et la forme courte `T[]`. L'outil utilise toujours la forme courte.
Interface imbriquée: Une interface qui référence d'autres interfaces pour former une hiérarchie de types. L'outil produit une sous-interface pour chaque objet imbriqué, et l'interface principale les référence par nom de propriété.
TypeScript strict mode: Collection d'options strictes du compilateur TypeScript (noImplicitAny, strictNullChecks, strictFunctionTypes et plus). Avec strictNullChecks activé, null et undefined sont des types indépendants.
DTO (Data Transfer Object): Objet utilisé pour transférer des données entre couches (par exemple, entre une API et un service). Les projets TypeScript décrivent typiquement les DTOs avec des interfaces, en utilisant souvent readonly pour renforcer l'immuabilité.
Fusion de déclarations: Caractéristique TypeScript pour les interfaces : les interfaces de même nom fusionnent automatiquement leurs membres.
tsconfig.json: Fichier de configuration du projet TypeScript à la racine du projet. Contient compilerOptions (target, module, strict et plus), include et exclude.
tryFixJSON: Routine de réparation JSON intégrée à l'outil qui gère les virgules de fin, les guillemets simples utilisés à la place des doubles, les guillemets manquants, les commentaires et d'autres erreurs courantes de syntaxe JSON.

Règles de mappage des types JSON vers TypeScript

L'ensemble complet des règles utilisées par la fonction getTsType pour mapper les valeurs JSON aux types TypeScript :

Valeur JSON	Exemple	Type TypeScript	Règle de détection
`null`	`null`	`null`	JSON null est mappé directement à TS null
`undefined`	`undefined`	`undefined`	Les valeurs undefined sont mappées à TS undefined (uniquement à l'exécution)
`boolean`	`true / false`	`boolean`	typeof boolean est mappé à TS boolean
`integer`	`1, 100, -9999`	`number`	Les entiers et flottants sont mappés à TS number
`float`	`3.14, -0.5, 1e10`	`number`	Tous les littéraux numériques sont mappés à number
`string`	`"Alice", "Paris"`	`string`	typeof string est mappé à TS string
`empty array`	`[]`	`any[]`	Les arrays vides retombent sur any[]
`homogeneous array`	`[1, 2, 3]`	`T[] (par ex. number[])`	Les éléments du même type produisent un type d'array unique
`mixed array`	`[1, "a"]`	`(A \| B)[] (par ex. (number \| string)[])`	Les éléments de types mixtes produisent un array d'union
`object`	`{a: 1, b: "x"}`	`SubInterface (par ex. Root)`	Les objets imbriqués deviennent des sous-interfaces indépendantes qui sont référencées

interface vs type alias : comparaison

Pourquoi cet outil génère interface au lieu de type alias, et comment ils se comparent dans les projets TypeScript :

Capacité	interface	type alias	Notes
Description de forme d'objet	✓ (préférée)	✓ (aussi prise en charge)	Les deux fonctionnent ; l'outil émet interface
Fusion de déclarations	✓ (même nom fusionne)	✗ (erreur en doublon)	interface permet l'extension progressive
implements/extends	✓ (classes peuvent implements)	△ (seuls les objets type)	interface est plus naturel en OOP
Types union (A \| B)	✗	✓	type est plus concis pour les unions
Types intersection (A & B)	✗	✓	type est plus concis pour les intersections
Types de fonction	△ (requiert call signature)	✓ (direct)	type est plus intuitif pour les fonctions
Performance (beaucoup de types)	légèrement plus rapide	légèrement plus lent	interface fusionne incrémentalement
Choix de cet outil	✓ utilisation unifiée	✗	Cet outil se concentre sur les types d'objet

Règles de génération des champs optionnels et readonly

Comment les deux options à bascule affectent le code généré et quand utiliser chacune :

Option	Déclencheur	Syntaxe générée	Idéal pour
Optionnel (?): désactivé	(par défaut)	`name: string`	Strict, tous les champs requis
Optionnel (?): activé	value === null \|\| value === undefined	`name?: string`	Champs optionnels, données manquantes
Readonly: désactivé	(par défaut)	`name: string`	Types généraux, champs modifiables
Readonly: activé	s'applique à tous les champs	`readonly name: string`	État immuable, configuration, DTOs
Les deux activés	les deux conditions s'appliquent	`readonly name?: string`	Instantanés de réponse API, configuration optionnelle

Privacy & Security

Cet outil de conversion JSON vers TypeScript s'exécute entièrement dans votre navigateur. L'analyse JSON, l'inférence de types et la génération d'interface s'exécutent en JavaScript côté client ; rien n'est envoyé à un serveur. Les téléchargements de fichiers utilisent l'API native FileReader et ne passent jamais par un service intermédiaire. L'outil n'utilise pas de cookies de suivi et ne collecte aucune donnée d'entrée ou d'utilisation. Toutes les entrées et sorties sont effacées de la mémoire dès que la page est fermée ou rechargée. Sûr à utiliser avec du JSON contenant des clés API, des tokens ou d'autres données sensibles.

Authoritative References

TypeScriptManuel TypeScript - Interfaces
TypeScriptIntroduction au manuel TypeScript
MDNSpécification JSON - MDN Web Docs
TypeScriptTypeScript Playground
TypeScriptRéférence tsconfig.json
ZodZod - validation de schémas TypeScript-first