Entrée JSON

Sortie TypeScript

Qu'est-ce que JSON vers TypeScript ?

TypeScript ajoute des types statiques à JavaScript. Lorsque vous travaillez avec du JSON provenant d'une API ou d'un fichier de configuration, vous avez souvent besoin d'une interface ou d'un type décrivant la structure. L'écrire à la main est fastidieux. Cet outil infère les interfaces TypeScript à partir de votre JSON : il analyse les clés et les valeurs et génère les définitions de types correspondantes.

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 <strong>Copier</strong> ou <strong>Télécharger</strong> 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 :

Entrée JSON

Sortie TypeScript générée :

Sortie TypeScript

Limitations

Le générateur infère à partir de l'échantillon. Si un champ peut être <code>string | number</code> mais que votre échantillon ne contient que des chaînes, le type sera <code>string</code>. Si les tableaux peuvent être vides, le type d'élément peut être <code>unknown</code>. 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

Les champs optionnels sont-ils marqués ?

Cela dépend de l'implémentation. Certains générateurs marquent tous les champs comme requis ; d'autres infèrent à partir de l'échantillon. Vérifiez la sortie et ajoutez ? si nécessaire.

Qu'en est-il des types union ?

Si la même clé a des types différents dans différents objets, le générateur peut utiliser string | number ou une union similaire. Ou il peut choisir un type. Vérifiez la sortie.

Mes données sont-elles envoyées quelque part ?

Non. La génération s'exécute dans votre navigateur.

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 et d'autres.

Qu'en est-il des enums ?

Si un champ a un ensemble fixe de valeurs string, le générateur peut produire un type union comme "a" | "b" | "c". Pour des enums explicites, modifiez la sortie.

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).