BrowserTools
Accueil / Convertisseurs / JSON vers TypeScript

JSON vers TypeScript

Collez un exemple de vos données JSON et obtenez les types TypeScript qui les décrivent.

Chargement de JSON vers TypeScript… Si rien ne se passe, activez JavaScript.

Écrire à la main les types TypeScript d'une réponse d'API est long et source d'erreurs, surtout quand les données sont profondes ou que certains champs n'apparaissent que de temps en temps. Collez un vrai exemple JSON dans cet outil et il déduit les types pour vous pendant que vous tapez. Chaque objet imbriqué devient sa propre interface nommée, d'après la clé qui le contient convertie en PascalCase : une clé address donne une interface Address et un tableau projects donne une interface Project pour ses éléments. Les objets qui ont exactement la même forme sont déclarés une seule fois puis réutilisés, et les noms qui entreraient en conflit entre eux ou avec des types intégrés comme Date, Response ou Location reçoivent un suffixe, pour que le résultat compile tel quel.

Questions fréquentes

Comment les objets imbriqués deviennent-ils des interfaces ?
Chaque objet qui a au moins une clé devient une interface nommée distincte. Le nom vient de la clé qui le contient, convertie en PascalCase : billing_address donne BillingAddress. Les éléments d'un tableau reçoivent la forme au singulier de la clé, ainsi orders donne Order et categories donne Category. L'objet racine utilise le nom saisi dans le champ Root name.
Pourquoi un champ est-il marqué optionnel ?
Parce qu'il manquait dans au moins un des objets fusionnés à cette position. Si vous collez un seul objet, tous les champs sont obligatoires. Si vous collez un tableau d'objets, ou du JSON Lines, un champ ne reste obligatoire que si tous les échantillons le contiennent. Avec l'option "Optional instead of | null", les champs parfois null sont eux aussi écrits comme optionnels au lieu de recevoir | null.
Puis-je coller du JSON Lines ou plusieurs échantillons ?
Oui. Si le texte n'est pas un document JSON unique mais que chaque ligne non vide est du JSON valide, il est lu comme du JSON Lines et toutes les lignes sont fusionnées en un seul type. Pour un tableau JSON classique, cochez "Top-level array is a list of samples" afin que les éléments soient fusionnés dans le type racine lui-même au lieu de produire type Root = RootItem[].
Que deviennent les tableaux vides et les valeurs null ?
Un tableau toujours vide ne dit rien de ses éléments, il est donc typé unknown[]. Un champ qui n'a jamais été que null est typé null. Les deux cas sont signalés dans les notes sous le résultat. Le mieux est de coller un échantillon où ces champs ont de vraies valeurs, car l'outil ne peut décrire que les données qu'il voit.
Les chaînes de date sont-elles converties en Date ?
Non. JSON n'a pas de type date : après JSON.parse, une date reste une chaîne, et la typer en Date serait faux à l'exécution. L'outil la garde en string, indique dans les notes quels champs ressemblent à des dates ISO 8601 et ajoute format date-time ou date à ces champs dans le JSON Schema.
Faut-il choisir interface ou type ?
Pour de simples formes d'objets, les deux sont presque équivalents. Les interfaces peuvent être étendues et fusionnées, et de nombreux guides de style les préfèrent pour les modèles de données. Les alias type sont nécessaires pour les unions et certaines équipes les préfèrent par cohérence. Quand la racine n'est pas un objet, par exemple un tableau ou une valeur primitive, la racine est toujours un alias type, car une interface ne peut pas les décrire.
À quoi sert l'onglet JSON Schema ?
JSON Schema décrit la même structure dans un format indépendant du langage, compris par des validateurs comme Ajv, les outils OpenAPI et de nombreux éditeurs. Le schéma généré utilise le draft 2020-12, place les objets imbriqués dans $defs reliés par $ref, liste dans required les champs présents dans tous les échantillons et distingue integer de number. Servez-vous-en comme point de départ et affinez-le avec des motifs, des enums ou des limites.
Mon JSON est-il envoyé à un serveur ?
Non. La lecture et la déduction des types sont du JavaScript exécuté dans votre navigateur. Rien de ce que vous collez ou ouvrez n'est envoyé ni enregistré, vous pouvez donc utiliser en toute sécurité de vraies réponses d'API, des jetons ou des données personnelles.

À propos de JSON vers TypeScript

Plus vous fournissez d'échantillons, meilleurs sont les types. Collez un tableau d'enregistrements, plusieurs documents JSON au format JSON Lines (un objet par ligne, comme dans les fichiers de logs et les exports NDJSON), ou cochez l'option qui traite un tableau de premier niveau comme une liste d'échantillons. L'outil fusionne toutes les valeurs rencontrées à la même position : un champ absent de certains objets devient optionnel, un champ parfois null reçoit | null (ou devient optionnel, si vous préférez ce style), une valeur qui est une chaîne dans un enregistrement et un nombre dans un autre devient une union, et les tableaux d'éléments variés donnent (A | B)[]. Les tableaux toujours vides sont typés unknown[] et les champs qui n'ont jamais été que null sont typés null, et les deux cas figurent dans les notes pour que vous sachiez lesquels compléter à la main. Les clés qui ne sont pas des identifiants valides, comme content-type ou 2fa, sont mises entre guillemets automatiquement.

Vous contrôlez le style du résultat : le nom du type racine, interface ou alias type, l'export des déclarations, les propriétés et tableaux readonly, et les points-virgules. Un second onglet produit un JSON Schema (draft 2020-12) à partir de la même déduction, avec les objets imbriqués dans $defs, des listes required pour les champs présents dans tous les échantillons, la distinction entre integer et number, et un format date-time ou date pour les chaînes qui ressemblent à des dates ISO 8601. JSON n'a pas de type date, ces champs restent donc des string en TypeScript. Les deux résultats peuvent être copiés ou téléchargés sous forme de fichier .ts ou .schema.json. Tout se passe dans votre navigateur, vos réponses d'API privées et les données de vos clients ne quittent jamais votre appareil.

Le système de types de TypeScript est Turing-complet

Les types de TypeScript devaient décrire des valeurs JavaScript, mais les types conditionnels, les alias récursifs et les template literal types ont fait du vérificateur de types un petit langage de programmation à part entière. En 2017, une issue GitHub a montré que le système de types est Turing-complet, et depuis, certains écrivent des parseurs, de l'arithmétique et de petits interpréteurs qui s'exécutent entièrement dans le compilateur et rendent leurs résultats sous forme de types.

Le versant pratique, c'est le typage structurel. TypeScript ne se soucie pas du nom d'une interface, seulement de sa forme : un objet qui possède les bons champs satisfait une interface qu'il n'a jamais vue. C'est pour cela que des types générés à partir d'un échantillon JSON s'intègrent si bien : ils décrivent la forme des données, et toute valeur de cette forme est acceptée.

Soutenir