Setup de TypeScript Moderno: De tsc a esbuild y Bun (Transpilación Zero-Config)

DUGLAS MORENODUGLAS MORENO 👁 2

Si sos desarrollador y todavía configurás un tsconfig.json gigante con mil opciones cada vez que empezás un proyecto, este post es para vos. La realidad es que el ecosistema de JavaScript/TypeScript cambió drásticamente en los últimos años. Ya no estamos obligados a esperar a que el compilador oficial de Microsoft haga todo el trabajo pesado de transformación.

En este tutorial, vamos a recorrer el espectro de herramientas: desde el clásico tsc (el estándar de oro para chequeo de tipos) hasta las bestias de la velocidad como esbuild y el runtime todoterreno que es Bun. El objetivo es que aprendas a configurar un entorno donde la transpilación sea casi instantánea y la configuración sea mínima.

El problema: El cuello de botella de la compilación

Tradicionalmente, el flujo de trabajo con TypeScript funciona así: el compilador tsc lee tus archivos .ts, verifica que no tengas errores de tipos y luego genera archivos .js. El problema es que tsc hace dos cosas al mismo tiempo: chequea tipos y transpila código.

Chequear tipos es una tarea computacionalmente costosa. Si tu proyecto crece, el tiempo de compilación se dispara. La solución moderna es separar estas responsabilidades: usamos herramientas ultra rápidas para transformar el código (transpilación) y dejamos que tsc se encargue únicamente de avisarnos si metimos la pata con un tipo.

Nivel 1: El estándar clásico con tsc

Empecemos por la base. Para que esto funcione, necesitás tener Node.js instalado. Vamos a crear un proyecto desde cero.

mkdir tutorial-ts-moderno && cd tutorial-ts-moderno
npm init -y
npm install typescript --save-dev
npx tsc --init

El comando npx tsc --init te genera un archivo tsconfig.json. Para un setup moderno y sencillo, fijate que estas opciones estén presentes o configuradas así:

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "NodeNext",
    "moduleResolution": "NodeNext",
    "outDir": "./dist",
    "strict": true,
    "skipLibCheck": true
  }
}

Ahora, creá un archivo llamado index.ts:

const saludar = (nombre: string): string => {
  return `Hola, ${nombre}!`;
};

console.log(saludar("Mundo"));

Para compilar, ejecutamos:

npx tsc

Salida esperada:
No verás nada en la terminal si todo está bien, pero se habrá creado una carpeta dist/ con el archivo index.js adentro.

Si intentás compilar esto con un error:

console.log(saludar(42)); // Error: Argument of type 'number' is not assignable to parameter of type 'string'.

Al ejecutar npx tsc, la salida será algo como:
index.ts:4:18 - Error: Argument of type 'number' is not assignable to parameter of type 'string'.

Nivel 2: Velocidad pura con esbuild

esbuild es un bundler escrito en Go que es órdenes de magnitud más rápido que tsc o incluso Webpack. Lo que hace es simplemente "quitar" los tipos y dejar el JavaScript puro. No te va a decir si tenés un error de tipos, pero va a transformar tu código en milisegundos.

Para usarlo, primero instalalo:

npm install esbuild --save-dev

Podés correrlo directamente para transformar tu archivo:

npx esbuild index.ts --bundle --outfile=dist/bundle.js --platform=node

El Workflow Profesional: esbuild + tsc

Acá es donde se pone interesante. No querés renunciar a la seguridad de tipos, pero tampoco querés esperar a tsc para ver tus cambios. La estrategia es:

  1. Usar esbuild para correr tu código en desarrollo (transpilación instantánea).
  2. Usar tsc --noEmit para verificar que los tipos estén bien en segundo plano o en tu CI/CD.

Configurá un script en tu package.json:

"scripts": {
  "build": "esbuild index.ts --bundle --outfile=dist/bundle.js --platform=node",
  "check-types": "tsc --noEmit",
  "dev": "esbuild index.ts --bundle --outfile=dist/bundle.js --platform=node --watch"
}

Ahora, si ejecutás npm run dev, esbuild se quedará escuchando cambios. Modificá el archivo y vas a ver que la salida en la carpeta dist se actualiza casi instantáneamente.

Nivel 3: La era de Bun (Zero-Config)

Si lo que buscás es la experiencia más fluida posible, tenés que probar Bun. Bun no es solo un runtime (como Node), es también un gestor de paquetes, un test runner y, lo más importante para nosotros, un transpilador de TypeScript nativo.

Con Bun, no necesitás esbuild ni tsc para ejecutar tu código. Bun lee archivos .ts directamente.

Instalación de Bun

Si estás en macOS o Linux:

curl -fsSL https://bun.sh/install | bash

Ejecución directa

Si ya tenés tu archivo index.ts (el mismo del ejemplo anterior), simplemente hacé:

bun index.ts

Salida esperada:
Hola, Mundo!

No hubo paso de compilación intermedio. Bun leyó el TypeScript, lo entendió y lo ejecutó en un solo paso. Esto es lo que llamamos transpilación zero-config.

¿Y qué pasa con los tipos? Bun no chequea tipos al ejecutar para no perder velocidad. Para eso, seguís usando tsc --noEmit en tu proceso de desarrollo o antes de subir el código a producción.

Comparativa de herramientas

Característica tsc esbuild Bun
Velocidad Lenta Ultra rápida Instantánea
Chequeo de tipos No No
Transpilación
Uso principal Validación y build final Bundling de alto rendimiento Ejecución y desarrollo rápido

Buenas prácticas y errores comunes

1. No ignores el chequeo de tipos

El error más común al usar herramientas rápidas es "olvidarse" de que no chequean tipos. Si solo usás esbuild o Bun y no corrés tsc --noEmit, podés estar subiendo a producción código que tiene errores lógicos de tipos que TypeScript debería haber detectado.

2. El archivo tsconfig.json sigue siendo necesario

Aunque Bun o esbuild no lo usen para la velocidad, lo usan para saber cómo interpretar tu código (por ejemplo, si usás paths o decoradores). Mantené un tsconfig.json bien configurado.

3. Cuidado con las dependencias de Node

Si usás Bun, tenés que tener en cuenta que aunque es altamente compatible con Node, hay módulos muy específicos que podrían comportarse distinto. Siempre probá tus tests con el runtime que vas a usar en producción.

Conclusión

Configurar un entorno de TypeScript hoy ya no es una tarea de "una sola herramienta". El setup moderno es un equipo de especialistas:

  • tsc es tu inspector de calidad (chequeo de tipos).
  • esbuild es tu obrero de construcción (empaquetado rápido).
  • Bun es tu motor de alto rendimiento (ejecución directa).

Si estás empezando un proyecto nuevo, te recomiendo arrancar con Bun para la velocidad de desarrollo, y asegurarte de tener un script de tsc --noEmit en tu pipeline para no perder la seguridad que nos da TypeScript.

¡Dale play y empezá a experimentar!

Comentarios (0)

Sé el primero en comentar.

Dejá tu comentario