Aller au contenu principal
LibraTool logoLibraTool

Convertisseur JSON vers TypeScript — outil gratuit

Générez des interfaces ou alias de type TypeScript à partir de n'importe quel objet ou tableau JSON. Collez votre JSON et obtenez des types TypeScript prêts à l'emploi instantanément.

Fonctionne hors ligne une fois chargé
export interface User {
  id: number;
  name: string;
  email: string;
  isActive: boolean;
  score: number;
  tags: string[];
  address?: null;
}

export interface Root {
  user: User;
  createdAt: string;
  version: number;
}

Utilisations courantes

  • Générer des types TypeScript à partir des réponses de l'APICollez une réponse JSON de l'API et générez instantanément des interfaces TypeScript pour rendre votre code frontend type-safe.
  • Types TypeScript pour les objets de configuration et de paramètresGénérez des interfaces TypeScript à partir de fichiers de configuration JSON pour ajouter la sécurité des types aux paramètres de votre application.
  • Générer des types TypeScript à partir des enregistrements de la base de donnéesConvertissez les enregistrements de base de données exportés en JSON ou les résultats de requête ORM en interfaces TypeScript pour la saisie de la couche de données.
  • Données fictives et accessoires de test de typeGénérez des interfaces TypeScript à partir de données fictives JSON et d'accessoires de test pour typer vos tests unitaires et histoires Storybook.
  • Réponses d'API de tiers de typeGénérez des interfaces TypeScript à partir de réponses d'API de tiers où les types officiels sont manquants ou obsolètes.

Comment ça marche

Cet outil utilise un algorithme d'inférence de type récursif écrit à la main sans aucune bibliothèque externe — JSON.parse pour valider et analyser la saisie, puis un parcours personnalisé qui parcourt chaque valeur de l'arbre JSON et émet des déclarations d'interface ou de type TypeScript directement dans le navigateur. Rien n'est envoyé à un serveur.

  1. 1
    JSON analysé et validé
    Votre saisie est transmise à JSON.parse. Si cela échoue, l'erreur d'analyse exacte s'affiche immédiatement sous la saisie. Une analyse réussie produit un arbre de valeurs typées qui pilote le reste de la conversion.
  2. 2
    Inférence de type récursive
    Une fonction récursive getType parcourt chaque nœud : les primitives correspondent à string, number, boolean, ou null ; les objets déclenchent une nouvelle interface nommée ; les tableaux d'objets ont leurs clés fusionnées sur tous les éléments afin que les clés présentes seulement dans certains éléments deviennent optionnelles et que les types de valeur en conflit soient joints avec |.
  3. 3
    Nommage d'interface sûr contre les collisions
    Chaque objet imbriqué reçoit un nom en PascalCase dérivé de sa clé JSON (snake_case, kebab-case, et espaces sont tous normalisés). Si deux objets structurellement différents partageraient le même nom, un suffixe numérique est ajouté (Data, Data2, …) plutôt que d'écraser silencieusement la définition antérieure.
  4. 4
    Résultat rendu et téléchargeable
    Les interfaces imbriquées sont émises en premier, puis le type racine, formatés comme export interface ou export type selon votre sélection. Le résultat peut être copié dans le presse-papiers ou téléchargé en fichier .ts — le tout construit avec un Blob standard et sans aller-retour serveur.

Outils associés

📋

JSON Schema vers formulaire

Collez un JSON Schema et obtenez un formulaire fonctionnel en direct — texte, nombre, case à cocher, liste déroulante et champs de liste — puis copiez le JSON produit par vos entrées. Idéal pour prototyper des corps de requête API. S'exécute dans votre navigateur.

Essayer
⌨️

Test de vitesse de frappe (WPM)

Mesurez votre vitesse de frappe (WPM) et votre précision avec des tests chronométrés, par nombre de mots, par citation, personnalisés et zen. WPM en direct, vitesse brute, régularité, graphique des résultats, plusieurs langues et retour par caractère — tout dans votre navigateur.

Essayer
📐

Générateur CSS clamp()

Générez une valeur CSS clamp() fluide pour la typographie et l'espacement adaptatifs. Définissez les tailles min/max et la plage de viewport, consultez un aperçu en direct et copiez le CSS en une ligne.

Essayer

Questions fréquemment posées