I’m working on a full-stack TypeScript project with a React frontend and Express.js backend. I need to figure out the most effective way to handle shared type definitions between both parts of my application.
Right now I’m considering creating a common directory structure like /common/interfaces or maybe /lib/types where I can store all the shared TypeScript interfaces and types. This would include things like API request/response schemas, data models, and other shared contracts.
But I’m not completely sure if this approach is the right way to go. What are the current best practices for organizing shared types in a monorepo setup? Should I create a separate package for types, or is a simple shared folder sufficient? Any recommendations on folder structure and import strategies would be really helpful.
nice setup! how do you handl version mismatches when your types change? like if the api updates but the frontend’s still on the old version - got any validation middleware to catch those breaks?
i just use a /shared/types folder and it works great for smaller projects. dont overcomplicate things unless you actually need the package management hassle. just set up your tsconfig paths properly so imports work smoothly on both sides.
Creating a dedicated types package is a more effective approach than merely using a shared folder. Establish a separate @types/shared package within your monorepo, allowing both the client and server to access it easily while keeping version control streamlined. It’s also advisable to organize your types by domain; for instance, create files like user.types.ts and payment.types.ts, rather than categorizing them based on function. This structure simplifies updates to your API contracts. Additionally, implement barrel exports using an index.ts file to ensure cleaner imports, like import { User, CreateUserRequest } from '@my-app/types'. Consider running tsc --watch on your types package during development to instantly catch any breaking changes across your applications.