MyDevTools
FR

Convertisseur JSON vers TypeScript

Générez des interfaces ou des alias de type TypeScript à partir d'un exemple JSON : types imbriqués, éléments fusionnés, champs optionnels, export.

Vos saisies et fichiers restent dans le navigateur

Entrée JSON

Collez un exemple de JSON : les interfaces TypeScript sont générées au fil de la saisie.

Dans l’éditeur, Tab indente. Appuyez sur Échap puis sur Tab pour quitter l’éditeur.

Sortie TypeScript

Les interfaces TypeScript apparaîtront ici...

Sur cette page

Collez un exemple JSON — une réponse d'API, un fichier de configuration, une fixture de test — et obtenez les déclarations TypeScript correspondantes au fil de la saisie. Les objets imbriqués deviennent des interfaces nommées à part entière, la sortie peut donc aller directement dans un fichier .ts.

Fonctionnalité détaillée

Les types sont déduits des valeurs : string, number, boolean, null, les tableaux en T[], les tableaux hétérogènes en unions comme (number | string | null)[] et un tableau vide en unknown[]. Chaque objet imbriqué reçoit une interface nommée d'après son chemin en PascalCase (shipping_address dans Order → OrderShippingAddress). Tous les objets d'un tableau sont fusionnés en un seul type d'élément : une clé absente de certains éléments devient optionnelle, et une clé dont les valeurs sont de types différents reçoit une union.

Options : Nom racine définit le nom du type de premier niveau (par défaut Root) ; Mot-clé export ajoute export à chaque déclaration ; Champs optionnels (?) — activé par défaut — marque comme optionnelles les clés dont la valeur est null ; Utiliser un alias de type écrit type X = { … }; au lieu de interface X { … }. Un tableau à la racine produit un alias comme export type Users = UsersItem[];. Les clés qui ne sont pas des identifiants valides sont mises entre guillemets ("order-id": string;), et les noms de type en collision reçoivent un suffixe numérique.

La sortie est régénérée à chaque modification (après une courte pause) ainsi qu'au clic sur Convertir ou avec Ctrl+Entrée ; un JSON invalide affiche l'erreur du parseur. Le résultat se trouve dans un éditeur en lecture seule que vous pouvez Copier ou enregistrer avec Télécharger .ts sous le nom types.ts. Tout s'exécute localement — l'exemple n'est jamais envoyé ni enregistré.

Exemples pratiques

Objet d'API : {"id":7,"user_name":"ann","tags":["a"],"manager":null} avec le Nom racine User et Mot-clé export donne export interface User { id: number; user_name: string; tags: string[]; manager?: null; }.

Tableau d'objets différents : [{"id":1,"email":"[email protected]"},{"id":2,"phone":"555"}] avec le Nom racine Users donne export interface UsersItem { id: number; email?: string; phone?: string; } et export type Users = UsersItem[];.

Alias de type et clés entre guillemets : {"order-id":"A1","items":[{"sku":"x","qty":2}],"shipping_address":{"city":"Omsk"}} avec le Nom racine Order et Utiliser un alias de type donne type OrderItemsItem = { sku: string; qty: number; };, type OrderShippingAddress = { city: string; }; et type Order = { "order-id": string; items: OrderItemsItem[]; shipping_address: OrderShippingAddress; };.

Comment utiliser cet outil

  1. Collez votre JSON

    Placez un exemple JSON dans l'éditeur Entrée JSON. La Sortie TypeScript se met à jour automatiquement.

  2. Ajustez les options

    Définissez le Nom racine et activez ou désactivez Mot-clé export, Champs optionnels (?) et Utiliser un alias de type selon vos besoins.

  3. Récupérez les types

    Cliquez sur Copier pour copier les déclarations ou sur Télécharger .ts pour les enregistrer sous le nom types.ts.

Conseils et bonnes pratiques

  • Un exemple ne montre que les valeurs qu'il contient : un champ à null dans l'exemple est typé null, remplacez-le donc à la main par le type réel (par exemple string | null).
  • Incluez plusieurs éléments de tableau avec des champs optionnels différents pour obtenir le bon type d'élément.
  • Tous les nombres deviennent number, et les dates au format ISO restent string.
  • Désactivez Champs optionnels (?) si les valeurs null sont toujours envoyées explicitement et que vous voulez manager: null comme clé obligatoire.
  • Les noms de propriétés gardent leur graphie d'origine ; seuls les noms de type sont convertis en PascalCase.