Sergei Shmelev
FullStack разработчик (JavaScript/TypeScript) · 16.03
Как работать с типами, если у тебя фронтенд и бэкенд на TS
Когда я впервые столкнулся с задачей синхронизации типов между фронтом и бэком, всё казалось простым: скопировал интерфейсы с бэкенда, вставил во фронт, и задача решена. Но спустя пару месяцев начался хаос: где-то обновилась структура данных, на фронте остались старые типы, и всё начало ломаться.
❌ В чём проблема? Когда у тебя два отдельных проекта (Next.js и NestJS, как в моём случае), возникает соблазн дублировать типы. Но это ведёт к головной боли: 🔴 Нужно помнить, чтобы обновлять типы вручную в обоих местах 🔴 Можно легко забыть, и тогда ошибки проявятся уже в рантайме 🔴 Это просто неудобно
✅ Как можно решить эту проблему? 💡 1. Вынести типы в отдельный пакет Создать отдельную папку с типами, и теперь фронт и бэк подключают её как зависимость. Это будет удобнее, чем дублирование, потому что любые изменения сразу доступны в обоих местах.
💡 2. Перевести проект в монорепозиторий Когда фронт и бэк уже в одном репозитории, можно настроить так, чтобы оба проекта использовали общие типы прямо из папки. Так можно избавиться от лишних NPM-пакетов и ускорить разработку.
💡 3. Настроить автоматическую генерацию типов из БД (что я на самом деле и сделал) Так как я использую Prisma ORM, я выбрал третий вариант — настроил генерацию типов на основе структуры базы данных. Теперь при каждом обновлении схемы новые типы появляются автоматически, и мне не нужно их вручную синхронизировать. Это оказалось очень удобно, потому что теперь все типы всегда актуальны.
🚀 Вывод ✔️ Если фронт и бэк в разных репозиториях → лучше сделать отдельный NPM-пакет с типами ✔️ Если всё в одном репо → удобнее использовать общую папку с типами ✔️ Если используешь Prisma ORM → просто генерируй типы автоматически
Теперь у меня один источник правды для типов, и я больше не трачу время на ручное копирование. Ошибок стало меньше, а разработка — быстрее и приятнее! 😎
А как вы решаете эту проблему? Делитесь в комментах! 🚀
еще контент автора
еще контент автора
Sergei Shmelev
FullStack разработчик (JavaScript/TypeScript) · 16.03
войдите, чтобы увидеть
и подписаться на интересных профи