Что такое DTO на фронтенде

Что проверяют

Видите ли вы границу между тем, что приехало по сети, и тем, чем оперирует интерфейс. Вопрос проверяет, есть ли в проекте слой, который знает формат бэкенда, и не расползается ли этот формат по компонентам.

Как отвечать

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

Что это даёт: переименование поля на бэкенде правится в одном файле, а не в тридцати компонентах; даты становятся датами, а числа числами один раз; пропуски схлопываются в понятные значения по умолчанию; ответ можно проверить схемой на входе и упасть в одном месте, а не на попытке отрисовать пустоту.

type UserDto = { id: number; first_name: string; created_at: string };
type User = { id: number; firstName: string; createdAt: Date };

const toUser = (d: UserDto): User => ({
  id: d.id,
  firstName: d.first_name,
  createdAt: new Date(d.created_at),
});

На фронтенде DTO это обычно тип или схема, а не класс: поведения у него нет. Типы удобно генерировать из описания API, тогда расхождение с контрактом ловит компилятор, а не тестировщик.

Где спотыкаются

Считают, что DTO на клиенте скрывает лишние поля и добавляет безопасности. Если сервер прислал поле, оно уже в браузере и видно во вкладке сети. Отбор полей делается на сервере, клиентский маппер лишь прячет их от остального кода.

Говорят, что DTO уменьшает трафик. Объём определяет контракт и то, что вы запросили, а объект на клиенте создаётся уже после того, как ответ полностью загружен.

Мапят ответ прямо в компоненте или впадают в другую крайность и заводят классы с мапперами на каждое поле. Рабочая середина это один слой преобразования рядом с клиентом API.