TypeScript Academy · Leçon

Types de valeurs JSON

Définir un type complet et sûr du point de vue du typage pour les valeurs JSON.

Types de valeurs JSON est une leçon TypeScript Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage TypeScript Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours TypeScript Academy comprend 4 leçons au total.

Qu’est-ce qu’une valeur JSON ?

JSON autorise un ensemble fixe de formes de valeurs : chaînes, nombres, booléens, valeur nulle, tableaux et objets. Un type récursif peut décrire exactement cet ensemble.

type Json =
  | string
  | number
  | boolean
  | null
  | Json[]
  | { [k: string]: Json };
// arrays and objects nest Json again.

Le type JSON récursif

L’idée essentielle est la suivante : les tableaux contiennent Json et les valeurs des objets sont des Json, si bien que le type se référence lui-même pour les données imbriquées.

type Json =
  | string | number | boolean | null
  | Json[]
  | { [k: string]: Json };
const x: Json = { name: "Ada", tags: ["a", "b"], active: true };
console.log(x);

Valeurs JSON primitives

Les valeurs JSON les plus simples sont des primitives. Chacune peut être directement affectée à Json.

type Json = string | number | boolean | null | Json[] | { [k: string]: Json };
const a: Json = "hello";
const b: Json = 42;
const c: Json = true;
const d: Json = null;
console.log(a, b, c, d);

Tableaux JSON

Un tableau JSON est de type Json[] ; il peut donc contenir un mélange de valeurs JSON, notamment des tableaux et des objets imbriqués.

type Json = string | number | boolean | null | Json[] | { [k: string]: Json };
const arr: Json = [1, "two", true, null, [3, 4]];
console.log(Array.isArray(arr));

Objets JSON

Un objet JSON associe des clés chaîne à des valeurs Json au moyen d’une signature d’index, ce qui autorise un imbrication arbitraire.

type Json = string | number | boolean | null | Json[] | { [k: string]: Json };
const obj: Json = {
  user: { name: "Ada", age: 36 },
  scores: [10, 20, 30]
};
console.log(obj);

JSON profondément imbriqué

Comme le type est récursif, les structures profondément imbriquées sont entièrement typées sans aucune déclaration supplémentaire.

type Json = string | number | boolean | null | Json[] | { [k: string]: Json };
const deep: Json = {
  a: { b: { c: [1, { d: true }] } }
};
console.log(deep);

Ce que JSON exclut

Le type Json rejette correctement les valeurs que JSON ne peut pas représenter, comme undefined, les fonctions ou les objets Date.

type Json = string | number | boolean | null | Json[] | { [k: string]: Json };
// const bad: Json = undefined; // Error
// const fn: Json = () => 1;   // Error
const good: Json = { ok: true };
console.log(good);

Valider les formes JSON à l’exécution

Le type décrit un JSON valide, mais vous devez tout de même valider les entrées non fiables à l’exécution. Un garde récursif vérifie chaque niveau.

type Json = string | number | boolean | null | Json[] | { [k: string]: Json };
function isJson(v: unknown): v is Json {
  if (v === null) return true;
  const t = typeof v;
  if (t === "string" || t === "number" || t === "boolean") return true;
  if (Array.isArray(v)) return v.every(isJson);
  if (t === "object") return Object.values(v as object).every(isJson);
  return false;
}
console.log(isJson({ a: [1, 2], b: "x" }));

Analyser vers un type Json

JSON.parse renvoie any. Convertissez donc le résultat analysé en Json uniquement après l’avoir validé, ou donnez un type à la variable et validez-la.

type Json = string | number | boolean | null | Json[] | { [k: string]: Json };
const raw = "{ \"id\": 1, \"tags\": [\"a\"] }";
const parsed = JSON.parse(raw) as Json;
console.log(parsed);

Parcourir une valeur Json

Un parcours récursif peut parcourir n’importe quelle valeur JSON en traitant les primitives, les tableaux et les objets après avoir vérifié leur forme à l’exécution.

type Json = string | number | boolean | null | Json[] | { [k: string]: Json };
function countLeaves(v: Json): number {
  if (Array.isArray(v)) return v.reduce((a, x) => a + countLeaves(x), 0);
  if (v !== null && typeof v === "object") return Object.values(v).reduce((a, x) => a + countLeaves(x), 0);
  return 1;
}
console.log(countLeaves({ a: [1, 2], b: "x" }));

Pourquoi le type Json est utile

Un type Json précis documente exactement ce qui peut franchir la limite de votre API et détecte dès la compilation les tentatives de sérialisation de valeurs qui ne sont pas du JSON.

type Json = string | number | boolean | null | Json[] | { [k: string]: Json };
function send(payload: Json): string {
  return JSON.stringify(payload);
}
console.log(send({ ok: true, items: [1, 2, 3] }));

Vérification rapide : types de valeurs JSON

Vérifiez votre compréhension des types de valeurs JSON.

Récapitulatif : types de valeurs JSON

Vous avez défini un type récursif Json couvrant les primitives, les tableaux et les objets, appris ce qu’il exclut et validé des entrées non fiables avec un garde de type récursif.

type Json = string | number | boolean | null | Json[] | { [k: string]: Json };
const data: Json = { id: 1, tags: ["a", "b"] };
console.log(JSON.stringify(data));

Questions Fréquemment Posées

La leçon « Types de valeurs JSON » est-elle gratuite ?

Oui — le texte complet de « Types de valeurs JSON » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours TypeScript Academy, passe à CoddyKit PRO. Le cours TypeScript Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Types de valeurs JSON » ?

Définir un type complet et sûr du point de vue du typage pour les valeurs JSON. Tu pratiques TypeScript Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer TypeScript Academy ?

Aucune expérience préalable n'est requise. TypeScript Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.

Combien de temps prend la leçon « Types de valeurs JSON » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon TypeScript Academy ?

Oui. Chaque leçon TypeScript Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

← Retour à TypeScript Academy