Приведение объектов JSON к классам TypeScript: глубокое погружение

В современной веб-разработке работа с данными JSON является обычной задачей. Независимо от того, извлекаем ли мы данные из API или читаем конфигурацию, мы часто используем структуры JSON. Но как в статически типизированном мире TypeScript преобразовать эти динамические объекты JSON в экземпляры классов TypeScript? Давайте рассмотрим это подробно.

Зачем приводить JSON к классу TypeScript?

Во-первых, давайте поймем «почему» за этим. Объекты JSON динамичны и гибки, но классы TypeScript предоставляют план для наших данных, обеспечивая структуру и позволяя нам определять методы.

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

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

В простых случаях у вас может возникнуть соблазн использовать утверждения типа TypeScript:

class User {
    name: string;
    age: number;
}

const jsonData = '{"name": "John", "age": 25}';
const user: User = JSON.parse(jsonData) as User;

Это будет проверка типов, но важно понимать, что это не создает экземпляр класса User. Это обычный объект, который TypeScript обрабатывает так, как если бы он имел тип User.

Глубокое литье с конструктором

Чтобы действительно создать экземпляр класса TypeScript из объекта JSON, вы часто будете использовать конструктор класса:

class User {
    name: string;
    age: number;

    constructor(data: any) {
        this.name = data.name;
        this.age = data.age;
    }

    getFullName(): string {
        return this.name;
    }
}

const jsonData = '{"name": "John", "age": 25}';
const user = new User(JSON.parse(jsonData));
console.log(user.getFullName()); // Outputs: John

Автоматизация с помощью Class-transformer

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

import { plainToClass } from "class-transformer";

class User {
    name: string;
    age: number;

    getFullName(): string {
        return this.name…