TypeScript Academy · Урок

Типы значений JSON

Определяйте полный тип значения JSON с проверкой типов

«Типы значений JSON» — бесплатный урок TypeScript Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения TypeScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс TypeScript Academy содержит 4 уроков всего.

Что такое значение JSON

JSON допускает фиксированный набор форм значений: строки, числа, логические значения, null, массивы и объекты. Рекурсивный тип может точно описать этот набор.

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

Рекурсивный тип JSON

Главная идея такова: массивы содержат Json, а значения объектов являются Json, поэтому тип ссылается сам на себя для описания вложенных данных.

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

Примитивные значения JSON

Простейшие значения JSON — примитивы. Каждое из них можно непосредственно присвоить типу 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);

Массивы JSON

Массив JSON имеет тип Json[], поэтому может содержать любые значения JSON, включая вложенные массивы и объекты.

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

Объекты JSON

Объект JSON сопоставляет строковые ключи со значениями Json с помощью индексной сигнатуры, что позволяет создавать произвольную вложенность.

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

Поскольку тип является рекурсивным, структуры с большой глубиной полностью типизированы без дополнительных объявлений.

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

Что JSON не включает

Тип Json правильно отклоняет значения, которые JSON не может представить, например undefined, функции или объекты 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);

Проверка форм JSON во время выполнения

Тип описывает допустимый JSON, но недоверенный ввод всё равно нужно проверять во время выполнения. Рекурсивный защитный проверяющий код проверяет каждый уровень.

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" }));

Разбор в тип Json

JSON.parse возвращает any, поэтому приводите разобранный результат к типу Json только после проверки либо объявляйте переменную нужного типа и выполняйте проверку.

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);

Обход значения Json

Рекурсивный обходчик может пройти по любому значению JSON, обрабатывая примитивы, массивы и объекты на основе проверки их формы во время выполнения.

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" }));

Зачем нужен тип Json

Точный тип Json документирует, какие данные могут пересекать границу вашего API, и обнаруживает попытки сериализовать значения, не относящиеся к 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] }));

Быстрая проверка: типы значений JSON

Проверьте своё понимание типов значений JSON.

Итоги: типы значений JSON

Вы определили рекурсивный тип Json, включающий примитивы, массивы и объекты, узнали, что он исключает, и проверили недоверенный ввод с помощью рекурсивного защитного проверяющего кода.

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

Часто задаваемые вопросы

Урок «Типы значений JSON» бесплатный?

Да — полный текст урока «Типы значений JSON» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс TypeScript Academy, подпишись на CoddyKit PRO. Курс TypeScript Academy содержит 4 уроков всего.

Чему я научусь в уроке «Типы значений JSON»?

Определяйте полный тип значения JSON с проверкой типов Ты практикуешь TypeScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать TypeScript Academy?

Предыдущий опыт не требуется. TypeScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.

Сколько времени занимает урок «Типы значений JSON»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке TypeScript Academy?

Да. Каждый урок TypeScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к TypeScript Academy