TypeScript: Patrones en React que Escalan en Producción

TypeScript no es llenar el código de tipos hasta que el compilador deje de quejarse. En proyectos React medianos y grandes, el objetivo es evitar bugs y dejar claro qué espera cada capa.

Tras años con React en producción (AEM, LGPD, productos propios), estos patrones ayudan cuando el equipo crece.

---

1. Modela el dominio antes del componente

En lugar de data: any, define tipos cerca del hook o del service:

tsCopiar
export type PricePoint = {
  date: string
  value: number
  marketplace: 'amazon' | 'mercadolivre' | 'shopee'
}

export type ProductSummary = {
  id: string
  title: string
  currentPrice: number
  history: PricePoint[]
}

El componente recibe ProductSummary — no JSON suelto de la API. Si el backend cambia, el error aparece en el lugar correcto.

---

2. Usa unions para estados de UI

Loading, error, vacío y éxito son más seguros con un union discriminado:

tsCopiar
type AsyncState<T> =
  | { status: 'idle' }
  | { status: 'loading' }
  | { status: 'error'; message: string }
  | { status: 'success'; data: T }

En JSX, un switch con never en default obliga a cubrir todos los casos — y evita mostrar data mientras carga.

---

3. Props claras, sin muchos booleanos

Prefiere una variante nombrada a cinco flags true/false:

tsCopiar
// ❌ difícil de mantener
type ButtonProps = { primary?: boolean; danger?: boolean; ghost?: boolean }

// ✅ claro y extensible
type ButtonProps = {
  variant?: 'primary' | 'secondary' | 'ghost' | 'danger'
  size?: 'sm' | 'md' | 'lg'
}

En design systems, evita combinaciones inválidas (primary + ghost a la vez).

---

4. satisfies y as const para configs

Menús, rutas y feature flags quedan tipados sin perder valores literales:

tsCopiar
const NAV_ITEMS = [
  { href: 'expertise', key: 'expertise' },
  { href: 'projects', key: 'projects' },
] as const satisfies ReadonlyArray<{ href: string; key: string }>

Mantienes autocomplete y validación en la definición.

---

5. Validación en el borde de la API (Zod o similar)

TypeScript desaparece tras el build. Validación en runtime en la entrada protege la UI:

tsCopiar
const ProductSchema = z.object({
  id: z.string(),
  title: z.string(),
  currentPrice: z.number().nonnegative(),
})

const product = ProductSchema.parse(await response.json())

Especialmente con APIs de terceros o scraping, donde el payload puede cambiar sin aviso.

---

Conclusión

TypeScript escala cuando los tipos describen el contrato entre capas — no cuando decoran el JSX.

Empieza por el dominio, modela estado async con unions, simplifica props y valida en el borde. El equipo gana velocidad con más confianza en el deploy.