Passer au contenu

JSON vers TypeScript

JSON vers TypeScript

Convertit des exemples JSON en interfaces et alias de type TypeScript, fusionne automatiquement les champs des tableaux d'objets, déduit les champs optionnels et les unions avec null, et génère des déclarations de type adaptées pour les tableaux et objets vides. Idéal pour modéliser des réponses d'API, initialiser des types frontend et organiser des structures de données.

JSON vers TypeScript

Démarrage rapide

1
Collez un exemple JSON valide dans l'éditeur de gauche.
2
Optionnel : définissez un nom de type racine personnalisé comme ApiResponse avant la génération.
3
Vérifiez les déclarations générées à droite. Les racines objet deviennent des déclarations interface ; les tableaux et primitives deviennent des alias de type.
4
Utilisez Copier ou Télécharger pour réutiliser la sortie .ts générée dans votre projet.

Scénarios courants

Transformez de vraies réponses API en premiers modèles TypeScript pour des pages frontend, des clients SDK ou des tests d'intégration.

Inspectez des tableaux d'objets mixtes pour voir les champs optionnels et les types union avant de formaliser un contrat d'API.

Convertissez des données JSON fictives en définitions de type rapides pour des fixtures, des stories Storybook ou des prototypes.

Examinez des déclarations imbriquées comme User ou Meta lorsque la forme des payloads backend change.

Conseils d'utilisation

Utilisez un exemple JSON représentatif. Le générateur n'infère qu'à partir des valeurs collées ; les cas absents n'apparaîtront pas dans la sortie.
Les tableaux vides deviennent unknown[] et les objets vides deviennent des interfaces étendant Record<string, unknown> jusqu'à ce que vous fournissiez des données plus riches.
Les déclarations imbriquées sont normalisées à partir des noms de propriété, donc la sortie récente préfère des noms comme User ou Meta plutôt que les anciennes formes préfixées par la racine.
La génération ne fonctionne qu'avec du JSON valide. Corrigez d'abord les erreurs de syntaxe ; l'éditeur affiche ligne et colonne en cas d'échec d'analyse.
Les noms racine personnalisés valides sont conservés tels quels ; les noms invalides sont normalisés en identifiant TypeScript PascalCase valide.

Limitations et compatibilité

Cet outil déduit les types à partir de données d'exemple, pas d'un schéma formel. Les champs absents de votre exemple ne peuvent pas être devinés.
L'entrée doit être du JSON strict. Les commentaires, virgules finales et autres syntaxes propres à JavaScript sont rejetés.
La sortie générée n'inclut pas d'instructions export. Ajoutez-les vous-même si votre projet exige des déclarations exportées.
Le résultat est uniquement du code TypeScript statique. Il ne crée ni validateurs, ni parseurs, ni sérialiseurs à l'exécution.

Confidentialité & sécurité

Tous les traitements s’effectuent dans votre navigateur ; aucune donnée ne quitte votre appareil

FAQ

6

Poursuivez avec ces outils associés pour l’étape suivante.