Работа с JSON в TypeScript: парсинг и сериализация для начинающих

Введение: почему JSON и TypeScript — идеальная пара

JSON (JavaScript Object Notation) — это легковесный формат обмена данными, который стал стандартом де-факто для веб-приложений. TypeScript, в свою очередь, добавляет статическую типизацию в JavaScript, что делает работу с данными более безопасной и предсказуемой. Для начинающих разработчиков понимание того, как парсить (преобразовывать строку в объект) и сериализовать (преобразовывать объект в строку) JSON в TypeScript, является фундаментальным навыком.

В этой статье мы разберем все аспекты работы с JSON в TypeScript: от базовых операций до продвинутых техник с типизацией. Вы узнаете, как избежать типичных ошибок и писать чистый, поддерживаемый код.

Основы парсинга JSON в TypeScript

Парсинг JSON — это процесс преобразования строки формата JSON в объект TypeScript. Основной инструмент для этого — глобальная функция JSON.parse(). Однако в TypeScript есть свои нюансы, связанные с типизацией.

Базовый парсинг строки JSON

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

const jsonString = '{"name": "Анна", "age": 28, "isStudent": false}';
const user = JSON.parse(jsonString);
console.log(user.name); // "Анна"
console.log(user.age);  // 28

Проблема в том, что TypeScript не знает, какую структуру имеет объект user. По умолчанию JSON.parse() возвращает тип any, что сводит на нет преимущества статической типизации.

Типизация результата парсинга

Чтобы исправить это, мы можем явно указать тип возвращаемого значения. Самый простой способ — использовать приведение типов (type assertion).

interface User {
    name: string;
    age: number;
    isStudent: boolean;
}

const jsonString = '{"name": "Анна", "age": 28, "isStudent": false}';
const user = JSON.parse(jsonString) as User;
console.log(user.name); // TypeScript знает, что name — это string

Теперь TypeScript понимает структуру объекта и может проверять типы свойств при обращении к ним.

Сериализация объектов в JSON в TypeScript

Сериализация — обратный процесс: преобразование объекта TypeScript в строку JSON. Для этого используется функция JSON.stringify().

Базовый пример сериализации

interface Product {
    id: number;
    title: string;
    price: number;
    inStock: boolean;
}

const product: Product = {
    id: 101,
    title: "Ноутбук",
    price: 54999.99,
    inStock: true
};

const jsonString = JSON.stringify(product);
console.log(jsonString);
// {"id":101,"title":"Ноутбук","price":54999.99,"inStock":true}

Функция JSON.stringify() автоматически преобразует объект в строку JSON. Важно помнить, что не все значения могут быть сериализованы: функции, undefined, Symbol — они будут пропущены или заменены на null.

Кастомизация сериализации с помощью replacer

Иногда нужно контролировать, какие поля попадут в итоговую строку. Для этого JSON.stringify() принимает второй аргумент — функцию replacer или массив ключей.

const product = {
    id: 101,
    title: "Ноутбук",
    price: 54999.99,
    discount: 10,
    secretCode: "SECRET123"
};

// Исключаем секретные данные
const safeJson = JSON.stringify(product, (key, value) => {
    if (key === 'secretCode') {
        return undefined; // Пропускаем это поле
    }
    return value;
});
console.log(safeJson);
// {"id":101,"title":"Ноутбук","price":54999.99,"discount":10}

Продвинутые техники: работа с вложенными объектами и массивами

В реальных приложениях JSON редко бывает плоским. Часто встречаются вложенные объекты, массивы и сложные структуры данных. TypeScript помогает управлять этой сложностью с помощью интерфейсов.

Парсинг сложных структур

interface Address {
    city: string;
    street: string;
    zipCode: string;
}

interface UserProfile {
    id: number;
    name: string;
    contacts: {
        email: string;
        phone?: string; // Необязательное поле
    };
    addresses: Address[];
}

const jsonString = `{
    "id": 1,
    "name": "Иван",
    "contacts": {
        "email": "ivan@example.com"
    },
    "addresses": [
        {"city": "Москва", "street": "Тверская", "zipCode": "101000"},
        {"city": "СПб", "street": "Невский", "zipCode": "191186"}
    ]
}`;

const userProfile = JSON.parse(jsonString) as UserProfile;
console.log(userProfile.addresses[0].city); // "Москва"
console.log(userProfile.contacts.phone);    // undefined (без ошибки TypeScript)

Обратите внимание на необязательное поле phone?. TypeScript позволяет безопасно обращаться к нему, не вызывая ошибок.

Сериализация массивов объектов

interface Task {
    id: number;
    title: string;
    completed: boolean;
}

const tasks: Task[] = [
    { id: 1, title: "Купить продукты", completed: false },
    { id: 2, title: "Написать код", completed: true },
    { id: 3, title: "Погулять с собакой", completed: false }
];

const tasksJson = JSON.stringify(tasks, null, 2);
console.log(tasksJson);
/* Вывод с форматированием:
[
  {
    "id": 1,
    "title": "Купить продукты",
    "completed": false
  },
  ...
]
*/

Третий аргумент 2 в JSON.stringify() задает отступы для красивого форматирования вывода — это полезно при отладке или логировании.

Обработка ошибок и безопасность при работе с JSON

Работа с JSON не всегда бывает гладкой. Некорректные данные, опечатки или вредоносные строки могут привести к ошибкам выполнения. В TypeScript важно предусмотреть обработку таких ситуаций.

Защита от некорректного JSON

function safeParseJSON<T>(jsonString: string): T | null {
    try {
        return JSON.parse(jsonString) as T;
    } catch (error) {
        if (error instanceof SyntaxError) {
            console.error("Некорректный JSON:", error.message);
        } else {
            console.error("Неизвестная ошиб