Cómo utilizar TypeScript en una configuración Monorepo

Una configuración monorepositorio le permite administrar varios paquetes o proyectos en un único repositorio. Con TypeScript, esta configuración es especialmente eficaz para compartir tipos, interfaces e incluso utilidades entre diferentes paquetes. Esta guía le mostrará cómo configurar TypeScript en un entorno monorepositorio.

1. Configuración de Monorepo

Para configurar un repositorio mono, puedes usar herramientas como npm workspaces o yarn workspaces. Estas herramientas te permiten administrar varios paquetes en el mismo repositorio y facilitan el intercambio de código entre proyectos.

1.1 Inicializando un Monorepo

Primero, crea una nueva carpeta para tu monorepo e inicialízala con npm o yarn.

mkdir my-monorepo
cd my-monorepo
npm init -y

Luego, configure los espacios de trabajo en su paquete package.json:

{
  "name": "my-monorepo",
  "version": "1.0.0",
  "private": true,
  "workspaces": [
    "packages/*"
  ]
}

Esta configuración le dice a npm o yarn que todos los paquetes vivirán dentro de la carpeta packages.

2. Agregar paquetes al Monorepo

Crea dos paquetes en tu monorepo. Para este ejemplo, crearemos un paquete shared para código reutilizable y un paquete web-app para una aplicación frontend.

mkdir -p packages/shared
mkdir -p packages/web-app

Dentro de cada paquete, inicialice un package.json:

cd packages/shared
npm init -y

cd ../web-app
npm init -y

3. Añadiendo TypeScript al Monorepo

A continuación, configuraremos TypeScript. Instale TypeScript y las dependencias necesarias en la raíz de su monorepositorio:

npm install typescript --save-dev

Cree un archivo tsconfig.json de nivel raíz para definir la configuración de TypeScript para todo el monorepositorio:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "*": ["packages/*/src"]
    },
    "composite": true,
    "declaration": true,
    "outDir": "dist",
    "rootDir": ".",
    "skipLibCheck": true,
    "module": "ESNext",
    "target": "ES6",
    "moduleResolution": "node"
  },
  "include": ["packages/*"]
}

La clave aquí es la opción paths, que permite a TypeScript comprender las importaciones de diferentes paquetes en el monorepositorio.

4. Configuración de TypeScript en cada paquete

Cada paquete necesita su propio tsconfig.json para funcionar correctamente en el repositorio mono. A continuación, se muestra un ejemplo de configuración para el paquete shared:

{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "rootDir": "src",
    "outDir": "dist"
  },
  "include": ["src"]
}

Y para el paquete web-app:

{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "rootDir": "src",
    "outDir": "dist"
  },
  "include": ["src"]
}

Ahora, se puede usar TypeScript en cada paquete y las configuraciones se comparten desde la raíz tsconfig.json.

5. Añadiendo código TypeScript a los paquetes

Agreguemos un código TypeScript de muestra a ambos paquetes. En el paquete shared, cree una carpeta src y agregue un archivo TypeScript:

mkdir -p packages/shared/src
touch packages/shared/src/index.ts

En index.ts, exporte una función simple:

export const greet = (name: string): string => {
  return `Hello, ${name}!`;
}

En el paquete web-app, cree una carpeta src y un archivo index.ts:

mkdir -p packages/web-app/src
touch packages/web-app/src/index.ts

Ahora, importe la función compartida:

import { greet } from 'shared';

console.log(greet('TypeScript Monorepo'));

6. Construyendo el Monorepo

Para compilar todo el código TypeScript en el monorepositorio, necesitamos usar el compilador TypeScript. En la raíz del monorepositorio, ejecute:

npx tsc --build

Este comando compilará todos los paquetes siguiendo sus respectivos archivos tsconfig.json.

Conclusión

En esta guía, explicamos cómo configurar y usar TypeScript en un repositorio mono. Al organizar el código en una estructura de repositorio mono, puede compartirlo fácilmente entre varios paquetes, lo que hace que su proceso de desarrollo sea más eficiente. Con las fuertes referencias de proyectos y tipado de TypeScript, esta configuración es perfecta para aplicaciones a gran escala o bibliotecas compartidas.