JSON vers TypeScriptInterfaces et alias générés localement
fr

AppHelp

Convertir du JSON en types TypeScript

Collez un objet JSON ou plusieurs exemples et obtenez immédiatement des définitions TypeScript modifiables, avec inférence des champs facultatifs, options de nommage, copie et téléchargement .ts.

Espace de génération des types JSON

Collez un exemple JSON pour obtenir immédiatement des définitions TypeScript modifiables.

Exécution locale
174 caractères16 lignes
Sortie TypeScript
array2 types4 propriétés
export type Root = RootItem[];

export interface RootItem {
  id: number;
  name: string;
  roles: string[];
  nickname?: string;
}

Les types sont déduits des valeurs d'exemple. Vérifiez les champs facultatifs, nullables et les tableaux vides avant la production.

Tâches courantes

  • JSON vers TypeScript
  • convertisseur JSON TypeScript
  • générateur interface TypeScript
  • générer TypeScript depuis JSON
  • JSON vers TS en ligne
  • tableau JSON TypeScript
  • alias TypeScript JSON
  • générateur de types frontend
  • conversion JSON locale
  • outil TypeScript gratuit

Réponse rapide

Collez un JSON valide pour générer immédiatement des interfaces ou alias TypeScript. Les objets imbriqués deviennent des déclarations nommées, les éléments de tableau sont fusionnés, les clés absentes peuvent devenir facultatives, les valeurs mixtes forment des unions et null reste explicite, le tout localement dans le navigateur.

Mode d'emploi

  1. 1. Coller un JSON représentatifUtilisez un exemple API réel mais non sensible. Plusieurs objets dans un tableau améliorent l'inférence des clés facultatives et des unions.
  2. 2. Configurer la sortieChoisissez le nom racine, interface ou type, la notation des tableaux, les clés facultatives, readonly et le formatage.
  3. 3. Vérifier les cas limitesContrôlez les tableaux vides, null, les primitives mixtes, les dates et les clés renommées par rapport au contrat API réel.
  4. 4. Copier ou téléchargerCopiez les déclarations ou téléchargez types.ts, puis ajoutez commentaires, enums, types de marque ou validation d'exécution.

Exemples

Objet simple

Entrée
{"id":1,"name":"Ada","active":true}
Sortie
export interface Root { id: number; name: string; active: boolean; }

Clé facultative dans un tableau

Entrée
[{"id":1},{"id":2,"nickname":"lin"}]
Sortie
export interface Root { id: number; nickname?: string; }

Avec l'inférence activée, une clé absente de certains exemples reçoit ?.

Champ nullable

Entrée
[{"score":9.5},{"score":null}]
Sortie
score: number | null;

null est conservé au lieu d'être remplacé silencieusement par any.

Cas d'utilisation courants

  • Initialiser les réponses API d'un projet frontend
  • Documenter des charges webhook et des fichiers de configuration
  • Comparer plusieurs exemples avant de définir un contrat
  • Créer des types de départ pour tests, fixtures et pipelines
  • Transformer des exemples JSON en déclarations révisables

Cas limites

  • Un seul exemple ne révèle pas tous les champs facultatifs ou valeurs d'enum ; des objets variés améliorent l'inférence.
  • Un tableau vide devient unknown[] ou any[] faute d'élément observable.
  • Les chaînes ISO restent string par défaut ; même avec Date, le JSON d'exécution contient une chaîne.
  • camelCase change les noms de clés et peut nécessiter une couche de mapping pour une API en snake_case.
  • Les types TypeScript statiques ne valident pas les données à l'exécution ; utilisez un schéma pour les données non fiables.

Fonctionnalités

  • Conversion instantanée de JSON vers TypeScript sans téléversement
  • Interfaces ou alias avec nom de racine personnalisable
  • Inférence des objets, tableaux, unions, null et clés facultatives
  • Options readonly, point-virgule, export, camelCase, Date et tableau
  • Quatre exemples réalistes et erreurs JSON immédiates
  • Copie du code ou téléchargement d'un fichier .ts modifiable

Questions fréquentes

L'outil génère-t-il des interfaces ou des alias ?
Les deux. Le style choisi est appliqué à toutes les déclarations d'objet générées.
Comment les propriétés facultatives sont-elles détectées ?
Une clé absente de certains objets d'un tableau reçoit ? lorsque l'option est activée.
Comment null et les valeurs mixtes sont-ils traités ?
Les types observés sont réunis en union, par exemple number | null.
Quel type est produit pour un tableau vide ?
Sans élément à analyser, l'option choisie produit unknown[] ou any[].
Le TypeScript généré valide-t-il le JSON à l'exécution ?
Non. Les types TypeScript sont effacés à l'exécution ; ajoutez un schéma pour les données non fiables.
Mon JSON est-il téléversé ?
Non. Analyse, inférence, copie et génération .ts restent dans le navigateur.