Как работать с типами, если у тебя фронтенд и бэкенд на TS

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

❌ В чём проблема? Когда у тебя два отдельных проекта (Next.js и NestJS, как в моём случае), возникает соблазн дублировать типы. Но это ведёт к головной боли: 🔴 Нужно помнить, чтобы обновлять типы вручную в обоих местах 🔴 Можно легко забыть, и тогда ошибки проявятся уже в рантайме 🔴 Это просто неудобно

✅ Как можно решить эту проблему? 💡 1. Вынести типы в отдельный пакет Создать отдельную папку с типами, и теперь фронт и бэк подключают её как зависимость. Это будет удобнее, чем дублирование, потому что любые изменения сразу доступны в обоих местах.

💡 2. Перевести проект в монорепозиторий Когда фронт и бэк уже в одном репозитории, можно настроить так, чтобы оба проекта использовали общие типы прямо из папки. Так можно избавиться от лишних NPM-пакетов и ускорить разработку.

💡 3. Настроить автоматическую генерацию типов из БД (что я на самом деле и сделал) Так как я использую Prisma ORM, я выбрал третий вариант — настроил генерацию типов на основе структуры базы данных. Теперь при каждом обновлении схемы новые типы появляются автоматически, и мне не нужно их вручную синхронизировать. Это оказалось очень удобно, потому что теперь все типы всегда актуальны.

🚀 Вывод ✔️ Если фронт и бэк в разных репозиториях → лучше сделать отдельный NPM-пакет с типами ✔️ Если всё в одном репо → удобнее использовать общую папку с типами ✔️ Если используешь Prisma ORM → просто генерируй типы автоматически

Теперь у меня один источник правды для типов, и я больше не трачу время на ручное копирование. Ошибок стало меньше, а разработка — быстрее и приятнее! 😎

А как вы решаете эту проблему? Делитесь в комментах! 🚀

Как работать с типами, если у тебя фронтенд и бэкенд на TS | Сетка — новая социальная сеть от hh.ru
repost

100

input message

напишите коммент

еще контент автора

еще контент автора

войдите, чтобы увидеть

и подписаться на интересных профи

в приложении больше возможностей

пока в веб-версии есть не всё — мы вовсю работаем над ней

сетка — cоциальная сеть для нетворкинга от hh.ru

пересекайтесь с теми, кто повлияет на ваш профессиональный путь