Monorepositorio con TypeScript: organización del código y mejores prácticas

Monorepositorio con TypeScript: organización eficiente del código para proyectos escalables

El desarrollo de aplicaciones modernas a menudo requiere dividir el código en varios módulos o paquetes independientes. Esto plantea un dilema: almacenar cada paquete en un repositorio separado (polirepositorio) o unificarlos todos en uno (monorepositorio). Para proyectos en TypeScript, el monorepositorio se vuelve una solución particularmente atractiva, garantizando uniformidad de tipos, simplificando la refactorización y centralizando la gestión de dependencias. En este artículo, analizaremos cómo organizar un monorepositorio con TypeScript, configurarlo y utilizarlo eficazmente en el desarrollo.

¿Qué es un monorepositorio y por qué es necesario para TypeScript?

Un monorepositorio (monorepo) es un enfoque en el que el código de varios proyectos (paquetes, librerías, microservicios) se almacena en un único repositorio. En el contexto de TypeScript, esto es especialmente útil, ya que:

• Tipos e interfaces comunes: Puede definir tipos comunes en un paquete y reutilizarlos en todos los demás, evitando duplicaciones y desincronizaciones.
• Configuración unificada: tsconfig.json, linters y formateadores se configuran una vez para todo el proyecto.
• Refactorización simplificada: Los cambios en el código o las interfaces comunes se reflejan inmediatamente en todos los paquetes dependientes, y TypeScript señalará las inconsistencias.
• Commits atómicos: Los cambios que afectan a varios paquetes se pueden confirmar y enviar con una sola operación.

Sin embargo, un monorepositorio requiere una organización adecuada; de lo contrario, se convierte en un caos. Las herramientas clave para trabajar con monorepositorios en TypeScript son npm/yarn/pnpm workspaces y TypeScript Project References.

Estructura de un monorepositorio con TypeScript

Consideremos una estructura típica de monorepositorio para una aplicación web que consta de un frontend, un backend y una librería de utilidades común:

my-monorepo/├── packages/│   ├── shared/          # Tipos comunes, utilidades, constantes│   │   ├── src/│   │   │   └── index.ts│   │   ├── tsconfig.json│   │   └── package.json│   ├── backend/         # Aplicación del servidor (ej. Express)│   │   ├── src/│   │   │   └── app.ts│   │   ├── tsconfig.json│   │   └── package.json│   └── frontend/        # Aplicación cliente (ej. React)│       ├── src/│       │   └── App.tsx│       ├── tsconfig.json│       └── package.json├── tsconfig.base.json   # Archivo de configuración base de TypeScript├── package.json         # package.json raíz (workspaces)└── .gitignore

En esta estructura:

• packages/* — directorio que contiene todos los paquetes del proyecto.
• tsconfig.base.json — configuración común de TypeScript de la que heredan todos los paquetes.
• package.json en la raíz declara los espacios de trabajo (workspaces).

Configuración del monorepositorio: guía paso a paso

1. Inicialización del proyecto raíz y configuración de Workspaces

Cree el directorio raíz y el archivo package.json:

{  "name": "my-monorepo",  "private": true,  "workspaces": [    "packages/*"  ],  "scripts": {    "build": "npm run build --workspaces",    "lint": "eslint packages/*/src --ext .ts,.tsx",    "test": "jest"  }}

El parámetro "private": true evita la publicación accidental del paquete raíz. "workspaces": ["packages/*"] le indica a npm dónde buscar los paquetes hijos.

2. Creación de la configuración base de TypeScript

Archivo tsconfig.base.json en la raíz del proyecto:

{  "compilerOptions": {    "target": "ES2020",    "module": "ESNext",    "moduleResolution": "node",    "strict": true,    "esModuleInterop": true,    "ski