Comment générer du TypeScript à partir de JSON
- Collez un exemple JSON. Plus ses tableaux contiennent d'éléments, mieux les champs optionnels et les unions sont détectés.
- Indiquez le nom du type racine et choisissez
interfaceoutype, avec ou sansexportetreadonly. - Copiez le code TypeScript dans votre projet ou téléchargez-le sous forme de fichier
.ts.
Comment les types TypeScript sont déduits du JSON
| JSON | TypeScript |
|---|---|
"Ada" | string |
42, 3.14 | number |
true | boolean |
null à côté d'autres valeurs | une union comme string | null |
"address": {"city": "Paris"} | une interface Address distincte |
"users": [{"id": 1}] | User[] – le nom de l'élément est mis au singulier |
| une clé absente de certains éléments du tableau | une propriété optionnelle key?: |
[1, "a"] | (string | number)[] |
[] | unknown[] |
{} | Record<string, unknown> |
Exemple de conversion JSON en TypeScript
Le JSON {"id": 1, "name": "Ada", "tags": ["admin"], "manager": null} devient :
export interface Root { id: number; name: string; tags: string[]; manager: null; }
Renommez Root en un nom parlant comme User ou ApiResponse. Les objets imbriqués ayant exactement la même structure (par exemple une adresse de facturation et une adresse de livraison) partagent une seule interface, et les clés qui ne sont pas des identifiants valides sont mises entre guillemets, par ex. "first-name": string.
Questions fréquentes
Interface ou type : lequel choisir ?
Pour décrire des objets, les deux se comportent de la même façon. Les interfaces peuvent être étendues et fusionnées, tandis que les alias de type peuvent aussi décrire des unions. Beaucoup d'équipes utilisent des interfaces pour les objets ; suivez le style de votre base de code.
Comment les champs optionnels sont-ils détectés ?
Les objets d'un même tableau sont fusionnés. Une clé absente de certains d'entre eux devient optionnelle (key?:), et une clé dont les valeurs ont des types différents devient une union.
Ces types valident-ils les données à l'exécution ?
Non. Les types TypeScript disparaissent à l'exécution du code. Pour vérifier les données entrantes, générez un JSON Schema à partir du même exemple avec notre générateur de JSON Schema, puis validez-les avec une bibliothèque de schémas.
Mon JSON est-il envoyé à un serveur ?
Non. Les types sont générés dans votre navigateur : vous pouvez coller sans risque des réponses d'API privées.