CI/CD para proyectos TypeScript: GitHub Actions de la A a la Z

Entrenador de Python en Línea para Principiantes

Aprende Python fácilmente sin sobrecargarte de teoría. Resuelve tareas prácticas con verificación automática, recibe pistas y escribe código directamente en el navegador, sin instalar nada.

Start Course

CI/CD para proyectos TypeScript: GitHub Actions de la A a la Z

El desarrollo moderno con TypeScript es imposible sin una automatización rápida y confiable. Las pruebas manuales, la compilación y el despliegue no solo llevan mucho tiempo, sino que también son propensos a errores. Aquí es donde entra en juego CI/CD (Integración Continua / Despliegue Continuo), una práctica que permite verificar y desplegar tu código automáticamente. En este artículo, analizaremos cómo configurar un pipeline completo de CI/CD para proyectos TypeScript con GitHub Actions, desde la configuración básica hasta escenarios avanzados.

¿Qué es CI/CD y por qué lo necesita un desarrollador de TypeScript?

CI/CD es una metodología que combina dos prácticas:

Integración Continua (CI) — compilación y pruebas automáticas del código en cada push al repositorio. Esto permite detectar errores y conflictos rápidamente.
Despliegue/Entrega Continua (CD) — despliegue automático de la aplicación en un servidor o en la nube después de que las pruebas se hayan superado con éxito.

Para proyectos TypeScript, CI/CD es especialmente importante, ya que TypeScript se compila a JavaScript, y los errores en los tipos o la configuración pueden manifestarse solo en la etapa de compilación. GitHub Actions es una herramienta integrada de GitHub que permite crear flujos de trabajo (workflows) directamente en el repositorio.

Paso 1: Workflow básico para un proyecto TypeScript

Empecemos con algo simple: crea un archivo .github/workflows/ci.yml en la raíz de tu proyecto. Este workflow se ejecutará en cada push a la rama main o al crear un Pull Request.

name: CI Pipeline

on:  push:    branches: [ main ]  pull_request:    branches: [ main ]

jobs:  build-and-test:    runs-on: ubuntu-latest

    strategy:      matrix:        node-version: [18.x, 20.x]

    steps:      - uses: actions/checkout@v4      - name: Use Node.js ${{ matrix.node-version }}        uses: actions/setup-node@v4        with:          node-version: ${{ matrix.node-version }}          cache: 'npm'      - run: npm ci      - run: npm run build --if-present      - run: npm test      - run: npm run lint --if-present

Analicemos los puntos clave:

actions/checkout — clona el repositorio en el runner.
actions/setup-node — instala Node.js con almacenamiento en caché de dependencias.
npm ci — instalación limpia de dependencias (más rápida que npm install).
npm run build — compilación de TypeScript a JavaScript (asegúrate de tener un script build en package.json).
npm test — ejecución de pruebas (por ejemplo, Jest).

La matriz strategy.matrix permite probar el código en varias versiones de Node.js simultáneamente, lo que aumenta la confianza en la compatibilidad.

Paso 2: Agregar linting y formato

La calidad del código es una parte importante de CI. Agreguemos pasos para ESLint y Prettier. Asegúrate de que estén instalados en el proyecto:

npm install --save-dev eslint prettier eslint-config-prettier

Complementemos nuestro workflow con nuevos pasos:

      - run: npm run lint      - run: npm run format:check

En package.json deben existir los scripts correspondientes:

{  "scripts": {    "lint": "eslint src --ext .ts",    "format:check": "prettier --check \\"src/**/*.ts\\"",    "format": "prettier --write \\"src/**/*.ts\\""  }}

Ahora, en cada push, GitHub Actions verificará no solo los tipos y las pruebas, sino también el estilo del código. Si el linter encuentra errores, el pipeline fallará y el desarrollador recibirá una notificación.