JSON vers TypeScript

Qu'est-ce que la conversion JSON vers TypeScript ?

Collez un payload JSON et obtenez en retour des interfaces TypeScript — des contrats typés qui décrivent exactement quelles propriétés un objet possède et quel type chacune contient. Sans elles, les données issues de JSON.parse() arrivent sous forme de any, sans assistance de l'éditeur ni vérification du compilateur sur les accès ou les affectations de propriétés. Convertir du JSON en TypeScript vous apporte cette sécurité sans écrire les interfaces à la main.

TypeScript couvre les six types de valeurs JSON : string, number, boolean, null, object et array. Chaque objet JSON imbriqué devient sa propre interface nommée. Les tableaux sont typés à partir de leur premier élément. Le résultat correspond à ce que JSON.parse() retourne réellement à l'exécution, de sorte que les interfaces reflètent des données réelles plutôt que des suppositions.

Écrire manuellement des interfaces pour du JSON volumineux ou profondément imbriqué est fastidieux et source d'erreurs. Un générateur JSON vers TypeScript lit la structure automatiquement, gère l'imbrication de façon récursive et produit un code d'interface propre en quelques secondes. C'est particulièrement utile lors de l'intégration d'une API inconnue, du prototypage avec des données fictives, ou de la migration d'un projet JavaScript vers TypeScript. Cela vous libère aussi du suivi manuel des noms et types de propriétés imbriquées, pour vous concentrer sur la logique applicative plutôt que sur le code boilerplate de types.

Pourquoi utiliser un générateur JSON vers TypeScript ?

Générer des interfaces TypeScript à la main est envisageable pour de petits objets, mais devient vite impraticable avec des structures imbriquées ou de grandes réponses d'API. Imaginez une réponse d'API à 50 champs avec trois niveaux d'imbrication — la rédiger à la main implique des dizaines d'interfaces, chacune étant une source potentielle de fautes de frappe ou de champs nullables oubliés. Un générateur automatisé produit l'ensemble en quelques millisecondes et réduit le risque de décalages de types entre votre code et les données consommées. Au-delà de la précision, il maintient vos types en phase avec le contrat d'API réel. Lorsqu'un service modifie la forme de sa réponse, il suffit de coller le JSON mis à jour et de régénérer — bien plus rapide que de retrouver chaque propriété modifiée dans un fichier d'interfaces écrit à la main.

Cas d'usage du JSON vers TypeScript

Référence de correspondance des types JSON vers TypeScript

Chaque valeur JSON correspond à un type TypeScript. Le tableau ci-dessous montre comment chaque type primitif et structurel JSON se traduit. Cette correspondance suit le standard JSON ECMA-404 et les types natifs de TypeScript.

interface vs type alias en TypeScript

TypeScript offre deux façons de décrire la forme d'un objet : les déclarations d'interface et les alias de type. Les deux fonctionnent pour représenter des structures JSON, mais ils diffèrent en termes d'extension et de fusion de déclarations. La plupart des générateurs JSON vers TypeScript produisent des interfaces, car c'est le choix idiomatique pour les formes d'objets en TypeScript.

Exemples de code

Voici des exemples de génération d'interfaces TypeScript depuis du JSON dans différents langages et outils. Chaque extrait produit une sortie exécutable.

// Manual interface definition from a JSON shape
const json = '{"id": 1, "name": "Alice", "active": true}';
const parsed = JSON.parse(json);

interface User {
  id: number;
  name: string;
  active: boolean;
}

const user: User = parsed;
console.log(user.name); // "Alice" — fully typed

import JsonToTS from 'json-to-ts';

const json = {
  id: 1,
  name: "Alice",
  address: { street: "123 Main St", city: "Springfield" },
  tags: ["admin", "user"]
};

const interfaces = JsonToTS(json, { rootName: "User" });
console.log(interfaces.join("\n\n"));
// interface Address {
//   street: string;
//   city: string;
// }
//
// interface User {
//   id: number;
//   name: string;
//   address: Address;
//   tags: string[];
// }

# Install: pip install datamodel-code-generator
# Generate TypeScript-style types from JSON using Pydantic models

# Command line:
# datamodel-codegen --input data.json --output model.py

# Or generate TypeScript directly with quicktype:
# pip install quicktype
# quicktype --lang ts --src data.json --out types.ts

import json

data = {"id": 1, "name": "Alice", "scores": [98, 85, 92]}

# Python equivalent using TypedDict (Python 3.8+)
from typing import TypedDict, List

class User(TypedDict):
    id: int
    name: str
    scores: List[int]

user: User = data  # type-checked by mypy

# Install quicktype globally
npm install -g quicktype

# Generate TypeScript interfaces from a JSON file
quicktype --lang ts --src data.json --out types.ts

# From a JSON string via stdin
echo '{"id": 1, "name": "Alice"}' | quicktype --lang ts

# Output:
# export interface Root {
#   id:   number;
#   name: string;
# }

Questions fréquentes