Setup de TypeScript Moderno: De tsc a esbuild y Bun (Transpilación Zero-Config)
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 --initEl 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 tscSalida 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-devPodés correrlo directamente para transformar tu archivo:
npx esbuild index.ts --bundle --outfile=dist/bundle.js --platform=nodeEl 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:
- Usar
esbuildpara correr tu código en desarrollo (transpilación instantánea). - Usar
tsc --noEmitpara 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 | bashEjecución directa
Si ya tenés tu archivo index.ts (el mismo del ejemplo anterior), simplemente hacé:
bun index.tsSalida 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 | Sí | No | No |
| Transpilación | Sí | Sí | Sí |
| 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:
tsces tu inspector de calidad (chequeo de tipos).esbuildes tu obrero de construcción (empaquetado rápido).Bunes 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!
DUGLAS MORENO
Comentarios (0)
Sé el primero en comentar.