Full Stack TypeScript App

interface Order {
  id: string;
  total: number;
}
// Shared between an Express route and a React component.
const order: Order = { id: "1", total: 99.99 };
console.log(order);

// packages/client, packages/server, packages/shared
// wired together with workspace references
console.log("A monorepo with a shared package ties client and server together");

interface OrderItem { name: string; price: number; }
interface Order {
  id: string;
  items: OrderItem[];
  total: number;
}
const order: Order = { id: "1", items: [{ name: "Book", price: 20 }], total: 20 };
console.log(order);

interface Order { id: string; total: number; }
// A backend field rename to Order breaks the frontend at compile time,
// not silently at runtime days later.
function renderOrder(order: Order) {
  return `Order ${order.id}: $${order.total}`;
}
console.log(renderOrder({ id: "1", total: 50 }));

// shared/order.ts -- no Express or React imports here
export interface Order {
  id: string;
  total: number;
}
console.log("Shared package stays framework-free, usable by both sides");