Aller au contenu
fr
Tous les outils

Catégories

Outils développeurEncodage & décodageJSON & donnéesHash & checksumOutils de texteDate & heureOutils réseauOutils de fichiersMarkdown & diagrammes

JSON vers TypeScript

Collez un exemple de JSON et obtenez des déclarations TypeScript prêtes à l’emploi qui décrivent sa structure.

Traité localement dans votre navigateur

Options
0 caractères · 0 lignes
Le résultat apparaîtra ici.

Qu'est-ce que JSON vers TypeScript ?

Quand on consomme une API JSON en TypeScript, il faut typer les réponses. Les écrire à la main pour de grosses charges est long et source d’erreurs : un générateur qui les déduit d’un exemple réel fait gagner du temps.

Cet outil parcourt votre JSON, crée une interface nommée (ou un alias de type) pour chaque objet imbriqué, fusionne les objets d’un tableau pour que les clés absentes de certains éléments deviennent optionnelles (?), et construit des unions quand un champ contient plusieurs types. Vous choisissez le nom racine, le style interface ou type, le mot-clé export et les propriétés en lecture seule.

Comment ça marche ?

  1. Collez un exemple JSON représentatif, idéalement avec plusieurs éléments de tableau pour détecter les champs optionnels.
  2. Définissez le nom du type racine et choisissez interface ou type, export et lecture seule.
  3. Relisez les déclarations générées dans la sortie.
  4. Copiez-les dans votre projet ou téléchargez types.ts.

Cas d'usage courants

  • Typer la réponse d’un point d’accès REST avant d’écrire le code client.
  • Modéliser un fichier de configuration ou une charge de webhook.
  • Obtenir un premier jet de types pour une API historique sans documentation.
  • Repérer quels champs d’une réponse sont parfois absents ou null.

Exemples

Essayez cette saisie dans l'outil ci-dessus :

Entrée
{"id":1,"name":"Ada","email":null,"tags":["math","code"],"profile":{"age":36,"admin":false},"orders":[{"sku":"A1","qty":2,"note":"gift"},{"sku":"B2","qty":1}]}
Sortie
export interface Root {
  id: number;
  name: string;
  email: null;
  tags: string[];
  profile: Profile;
  orders: Order[];
}

export interface Profile {
  age: number;
  admin: boolean;
}

export interface Order {
  sku: string;
  qty: number;
  note?: string;
}

Confidentialité

JSON vers TypeScript s'exécute entièrement dans votre navigateur. Le texte ou les fichiers que vous fournissez sont traités sur votre appareil et ne sont ni envoyés, ni journalisés, ni stockés sur nos serveurs.

Limites

Les types sont déduits d’un seul exemple : un champ toujours présent dans votre exemple peut être optionnel en réalité, et les dates arrivent sous forme de string. Relisez avant de committer.

Questions fréquentes

Comment les propriétés optionnelles sont-elles détectées ?

Quand plusieurs objets sont fusionnés (par exemple les éléments d’un tableau), une clé absente d’au moins l’un d’eux est marquée optionnelle avec un point d’interrogation. Une clé présente mais valant null garde une union avec null.

Comment les objets imbriqués sont-ils nommés ?

Chaque objet imbriqué reçoit une interface nommée d’après sa clé en PascalCase (orders devient Order pour les éléments du tableau). Les objets de structure identique réutilisent la même déclaration et les collisions de noms reçoivent un suffixe numérique.

Les grands entiers et les dates sont-ils gérés ?

Tous les nombres JSON deviennent number et les dates string, car JSON n’a pas de type date. Ajustez ces types à la main si votre code les convertit en Date ou en bigint.

Outils associés

Plus d'outils dans JSON & données →