Pipeline CI/CD para TypeScript: configuración desde cero en PythonLib

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

Pipeline CI/CD para TypeScript: configuración desde cero — guía paso a paso

\n\n

Has escrito un proyecto genial en TypeScript. El código es bonito, los tipos son estrictos, la lógica está depurada. Pero cada vez que necesitas subir una actualización al servidor, ejecutas manualmente la compilación, verificas que nada se haya roto y rezas para que producción no se caiga. ¿Te suena familiar?

\n\n

Es hora de cambiar eso. Un pipeline CI/CD no es magia para seniors con veinte años de experiencia. Es una herramienta que automatiza la rutina: linting, pruebas, compilación y despliegue. Un solo commit en la rama — y todo va a producción solo, sin estrés.

\n\n

En este artículo configuraremos desde cero un pipeline CI/CD completo para un proyecto TypeScript. Usaremos GitHub Actions como ejemplo, una herramienta gratuita y potente. Aprenderás a:

\n
    \n
  • Añadir linting y formateo automáticos
  • \n
  • Ejecutar pruebas unitarias y verificar tipos
  • \n
  • Compilar la aplicación y desplegarla en un servidor remoto
  • \n
  • Evitar errores típicos al configurar CI/CD
  • \n
\n\n

¿Listo? ¡Vamos allá!

\n\n

Por qué CI/CD es críticamente importante para un proyecto TypeScript

\n\n

TypeScript es un lenguaje con tipado estricto que se compila a JavaScript. A primera vista, esto da una ilusión de seguridad: si el código se compiló, significa que funciona. Pero en la práctica, la compilación no detecta errores lógicos, problemas con APIs o dependencias defectuosas.

\n\n

CI/CD (Integración Continua / Despliegue Continuo) resuelve este problema:

\n
    \n
  • Verificación automática: cada commit pasa por el pipeline — linting, pruebas, compilación. Si algo se rompe, lo sabrás en un minuto, no en una semana.
  • \n
  • Estándar unificado: todo el equipo trabaja con las mismas reglas. Nadie olvidará ejecutar las pruebas antes de hacer push.
  • \n
  • Despliegue rápido: nada de comandos manuales en el servidor. Un merge en main — y la actualización ya está en el sitio en producción.
  • \n
\n\n

Para TypeScript, CI/CD es especialmente importante porque los errores de tipo pueden manifestarse solo en tiempo de ejecución si la compilación no está configurada correctamente. El pipeline lo previene.

\n\n

Paso 1: Preparación del proyecto TypeScript

\n\n

Antes de configurar CI/CD, asegúrate de que el proyecto esté listo para la automatización. Aquí tienes el conjunto mínimo:

\n
    \n
  • package.json con los scripts definidos
  • \n
  • tsconfig.json — configuración de TypeScript
  • \n
  • ESLint y Prettier — para uniformidad del código
  • \n
  • Pruebas (Jest, Vitest o Mocha)
  • \n
\n\n

Supongamos que tienes un proyecto simple. La estructura podría verse así:

\n\n
my-ts-project/\n├── src/\n│   ├── index.ts\n│   └── utils.ts\n├── tests/\n│   └── utils.test.ts\n├── .eslintrc.json\n├── .prettierrc\n├── tsconfig.json\n├── package.json\n└── README.md\n
\n\n

Asegúrate de que en package.json estén definidos los scripts:

\n\n
{\n  "scripts": {\n    "lint": "eslint src/ tests/ --ext .ts",\n    "format": "prettier --check src/ tests/",\n    "type-check": "tsc --noEmit",\n    "test": "jest",\n    "build": "tsc",\n    "start": "node dist/index.js"\n  }\n}\n
\n\n

Ahora el proyecto está listo para CI/CD. Si falta algo, agrégalo. El pipeline ejecutará exactamente estos comandos.

\n\n

Paso 2: Elección de la plataforma CI/CD

\n\n

Hay muchas opciones: Jenkins, GitLab CI, CircleCI, Travis CI. Pero para principiantes y proyectos pequeños, GitHub Actions es la mejor opción:

\n
    \n
  • Integrado en GitHub — no necesitas configurar nada aparte
  • \n
  • Límite gratuito: 2000 minutos al mes (para repositorios privados)
  • \n
  • Enorme ecosistema de actions listas
  • \n
  • Sintaxis YAML clara
  • \n
\n\n

Si tu código está en GitLab — usa GitLab CI (la descripción es casi la misma). Pero en este artículo trabajaremos con GitHub.

\n\n

Paso 3: Creación del pipeline CI/CD — primer archivo

\n\n

En la raíz del proyecto, crea la carpeta .github/workflows/ y dentro, el archivo ci.y

Blogs

Book Recommendations