JSON vers TypeScript
Convertir JSON en interfaces TypeScript et générer des définitions de types
Entrée JSON
Sortie TypeScript
Qu'est-ce que JSON vers TypeScript ?
Vous construisez une app React ou Angular, vous avez une réponse d'API JSON sous les yeux, et vous devez définir une interface TypeScript pour elle. L'écrire à la main pour une réponse profondément imbriquée est fastidieux et source d'erreurs — un mauvais type et votre éditeur cesse de détecter les bugs. Cet outil infère les interfaces TypeScript directement depuis votre structure JSON, pour que vous puissiez coller la réponse et obtenir des définitions de types prêtes à l'emploi en quelques secondes.
Collez du JSON, obtenez du TypeScript. L'outil s'exécute dans votre navigateur. Rien n'est envoyé à un serveur. La sortie suit la syntaxe standard TypeScript.
Comment utiliser cet outil
Coller le JSON
Collez votre JSON dans l'éditeur de gauche ou téléchargez un fichier. Utilisez Exemple pour des données d'exemple. Le générateur infère les types à partir de la structure. Utilisez des données représentatives montrant tous les champs qui vous intéressent.
Vérifier les interfaces
Le panneau de droite affiche les interfaces générées. Les objets imbriqués ont leurs propres interfaces. Les tableaux sont typés comme Type[]. Les champs optionnels peuvent utiliser ? selon l'implémentation.
Copier ou télécharger
Utilisez Copier ou Télécharger pour obtenir le TypeScript. Collez-le dans votre projet. Vous devrez peut-être ajuster les noms, ajouter des génériques ou corriger les champs optionnels. Pour valider le JSON d'abord, utilisez le Validateur JSON.
Où JSON vers TypeScript aide
Lors de l'intégration d'API, vous avez souvent besoin de types pour le payload de réponse. Coller une réponse d'exemple ici vous donne des interfaces à intégrer dans votre projet Angular, React ou Node. Les fichiers de configuration, les payloads webhook et les documents de base de données bénéficient du même traitement. Écrire manuellement des interfaces pour des structures imbriquées complexes est source d'erreurs ; cet outil infère la structure à partir de votre échantillon. Pour une génération basée sur un schéma, utilisez le Générateur de schéma JSON et des outils comme quicktype.
Exemples JSON vers TypeScript
Voici un exemple de génération d'interfaces TypeScript à partir d'un objet JSON.
Exemple : enregistrement abonné
Entrée JSON :
Sortie TypeScript générée :
Limitations
Le générateur infère à partir de l'échantillon. Si un champ peut être string | number mais que votre échantillon ne contient que des chaînes, le type sera string. Si les tableaux peuvent être vides, le type d'élément peut être unknown. Vérifiez et modifiez la sortie. Pour une génération basée sur un schéma, utilisez le Générateur de schéma JSON et un outil comme quicktype.
Questions fréquentes
Comment générer automatiquement des interfaces TypeScript depuis du JSON ?
Collez votre JSON dans cet outil et il génère des interfaces TypeScript basées sur la structure. Les objets imbriqués obtiennent leurs propres interfaces, les tableaux sont typés comme Type[]. Copiez la sortie dans votre projet Angular, React ou Node.
Quelle est la différence entre interface et type TypeScript pour JSON ?
Les deux fonctionnent bien. interface est préféré quand vous avez besoin d'étendre ou d'implémenter ; type est mieux pour les types union et les types mappés. Pour la plupart des formes de réponse d'API, l'un ou l'autre convient — le générateur produit interface par défaut.
Mes données sont-elles envoyées quelque part ?
Non. Tout s'exécute dans votre navigateur — votre JSON ne quitte jamais votre machine. Sûr à utiliser avec des réponses d'API de production.
Puis-je générer des types pour d'autres langages ?
Cet outil ne génère que du TypeScript. Le site a des convertisseurs pour C#, Java, Python, Go et d'autres.
Qu'en est-il des champs optionnels et des enums ?
Le générateur infère les types depuis votre échantillon. Les champs qui pourraient être optionnels ne seront pas marqués ? automatiquement — vérifiez la sortie et ajoutez ? si nécessaire. Pour les enums, si un champ utilise systématiquement des valeurs string spécifiques, vous pouvez remplacer string par une union comme "actif" | "inactif".
Outils connexes
Pour TypeScript, voir typescriptlang.org et objets TypeScript. Pour JSON, voir json.org et MDN JSON. Pour la génération schéma-vers-code, voir quicktype. Pour RFC 8259 (spécification JSON).