JSON en TypeScript
Convertir des objets JSON en interfaces et types TypeScript
Saisie et options
Préréglages et exemples rapides
Fonctionne dans votre navigateur. Vos saisies restent sur cet appareil.
Résultats
Saisissez vos valeurs pour voir le résultat.
Convertisseur JSON en TypeScript en ligne gratuit
Notre convertisseur JSON en TypeScript transforme des données JSON brutes en interfaces ou en alias de type TypeScript correctement typés en quelques secondes. Collez n’importe quel objet ou tableau JSON, cliquez sur « Convertir » et obtenez des définitions TypeScript propres et prêtes pour la production, que vous pouvez intégrer directement à votre code. L’outil gère automatiquement les objets imbriqués, les tableaux de types mixtes, les valeurs null et les structures profondément récursives.
Des options personnalisables vous donnent un contrôle total sur le résultat. Basculez entre la syntaxe interface et la syntaxe d’alias de type, marquez toutes les propriétés comme facultatives, appliquez le modificateur readonly, ajoutez les mots-clés export et définissez un nom d’interface racine personnalisé. Les interfaces imbriquées sont nommées automatiquement d’après les clés parentes et mises intelligemment au singulier, ce qui produit des noms de types lisibles comme « Project » à partir d’un tableau « projects ».
Que vous consommiez une API REST, migriez un projet JavaScript vers TypeScript ou documentiez des structures de données pour votre équipe, cet outil JSON vers TypeScript vous épargne l’écriture manuelle fastidieuse des types. Tout s’exécute dans votre navigateur : vos données JSON ne sont jamais envoyées à un serveur, vous pouvez donc l’utiliser sans risque avec des réponses d’API propriétaires et des charges utiles sensibles.
Fonctionnalités principales
- Génération récursive d’interfaces pour les objets JSON profondément imbriqués
- Détection intelligente du type des tableaux avec prise en charge automatique des types union pour les tableaux de types mixtes
- Bascule entre la syntaxe interface et la syntaxe d’alias de type
- Modificateur de propriétés facultatives pour des définitions de types souples
- Modificateur readonly pour créer des contrats de types immuables
- Mot-clé export configurable pour des interfaces prêtes à être utilisées comme modules
- Nom d’interface racine personnalisé
- Nommage intelligent des interfaces imbriquées avec mise au singulier (par ex. « projects » devient « Project »)
- Copie en un clic du code TypeScript généré dans le presse-papiers
- Exemple JSON préchargé avec objets imbriqués, tableaux et valeurs null pour des tests rapides
Comment utiliser le convertisseur JSON en TypeScript
- Configurez les options : définissez le nom de l’interface racine et choisissez vos préférences : interface ou alias de type, propriétés facultatives, readonly et mots-clés export.
- Collez votre JSON : saisissez ou collez un objet ou un tableau JSON dans le panneau d’entrée de gauche. Cliquez sur « Exemple JSON » pour charger une charge utile de démonstration.
- Cliquez sur Convertir : appuyez sur « Convertir en TypeScript » pour générer le résultat typé dans le panneau de droite.
- Examinez le résultat : inspectez les interfaces générées. Les types imbriqués apparaissent au-dessus de l’interface racine pour un ordre de dépendance clair.
- Copiez dans votre projet : cliquez sur « Copier » pour placer le code TypeScript dans votre presse-papiers, puis collez-le dans votre fichier .ts ou .d.ts.
Cas d’usage
- Consommation d’API REST : collez une réponse d’API pour générer des interfaces TypeScript qui gardent votre frontend sûr au niveau des types.
- Migration de JavaScript vers TypeScript : convertissez des fixtures JSON et des données fictives en définitions typées dans le cadre d’un projet de migration.
- Création de DTO côté backend : générez des types d’objets de transfert de données à partir d’exemples de requêtes ou de réponses pour des backends Node.js.
- Documentation d’API : incluez les interfaces générées dans la documentation de l’API pour que les consommateurs connaissent la forme exacte des données de requête et de réponse.
- Correspondance de types GraphQL : utilisez les types générés comme point de départ pour les définitions de types des résolveurs GraphQL.
- Tests et simulation : créez des fabriques de données fictives typées à partir de vraies réponses d’API pour les tests unitaires et d’intégration.
- Apprentissage de TypeScript : les étudiants peuvent voir comment les valeurs JSON correspondent aux types TypeScript et se construire une intuition du système de types.
Questions fréquentes
Cet outil est-il gratuit ?
Oui, le convertisseur JSON en TypeScript est entièrement gratuit, sans inscription ni limite d’utilisation. Convertissez autant de charges utiles JSON que nécessaire.
Mes données sont-elles en sécurité ?
Oui. Toute la conversion se fait localement dans votre navigateur. Vos données JSON ne sont jamais envoyées à un serveur, vous pouvez donc convertir en toute sécurité des réponses d’API propriétaires et des structures de données internes.
Quelle est la différence entre une interface et un alias de type ?
En TypeScript, une interface comme un alias de type peuvent décrire la forme d’un objet. Les interfaces prennent en charge la fusion de déclarations et sont généralement préférées pour les contrats d’API publics. Les alias de type sont plus flexibles et peuvent représenter des unions, des intersections et des types primitifs. Choisissez ce qui correspond aux conventions de votre projet.
Gère-t-il les tableaux de types mixtes ?
Oui. Si un tableau contient des éléments de types différents (par ex. des chaînes et des objets), le convertisseur génère un type union comme (string | MyObject)[]. Les formes d’objets de tous les éléments sont fusionnées en une seule interface complète.
Puis-je convertir des tableaux JSON à la racine ?
Oui. Si votre JSON racine est un tableau d’objets, le convertisseur crée une interface pour l’élément du tableau et un alias de type pour le tableau racine. Si le tableau ne contient que des primitives, il génère un alias de type simple comme « type RootObject = string[]. »
Astuces et bonnes pratiques
- Utilisez un exemple JSON représentatif : incluez tous les champs possibles dans votre exemple pour que l’interface générée reflète la forme complète des données.
- Définissez un nom racine parlant : remplacez « RootObject » par quelque chose de descriptif comme « UserResponse » ou « ProductData » pour un code plus lisible.
- Activez facultatif pour les données partielles : si votre API renvoie des champs différents selon le contexte, marquez les propriétés comme facultatives pour éviter les erreurs de compilation.
- Utilisez readonly pour l’état immuable : lorsque les types générés représentent un état qui ne doit pas être modifié (par ex. les tranches du store Redux), activez le modificateur readonly.
- Vérifiez le nommage imbriqué : contrôlez que les noms d’interfaces imbriquées générés automatiquement ont du sens. Renommez-les dans votre code si la mise au singulier donne des résultats maladroits.
- Combinez avec JSON Schema : pour une validation complète, générez un JSON Schema en plus des types TypeScript afin de valider les données à l’exécution comme à la compilation.