Montar el proyecto: tsc, correr TS y verlo compilar

Los tipos se borran, dijimos. Hoy lo VES: instalas el compilador de TypeScript, escribes un archivo .ts, lo compilas y observas el JavaScript puro que sale al otro lado. Además conoces las tres formas de correr TS en tu día a día y el sitio donde ver los errores de tipo en vivo sin instalar nada.

El compilador que traduce y revisa

Paso a paso: de .ts a .js

En un proyecto nuevo, instalas TypeScript como dependencia de desarrollo y lo inicializas:

pnpm add -D typescript      # el compilador
pnpm tsc --init             # crea el tsconfig.json (config del proyecto)

Escribes un archivo con tipos:

function saludar(nombre: string): string {
return "Hola, " + nombre;
}
console.log(saludar("Miguel"));

Lo compilas, y tsc genera un .js con los tipos YA borrados:

function saludar(nombre) {
return "Hola, " + nombre;
}
console.log(saludar("Miguel"));

Compara los dos archivos: el .js es idéntico salvo que desaparecieron : string. Eso es "los tipos se borran", con tus ojos. El navegador recibe el segundo; el primero solo existió para protegerte a ti.

Tres formas de correr TypeScript

El laboratorio instantáneo: TypeScript Playground

Para EXPERIMENTAR con tipos sin montar nada, existe el TypeScript Playground oficial: escribes TS a la izquierda, ves el JS compilado a la derecha, y los errores de tipo aparecen subrayados en vivo. Es donde vas a probar cada idea de este curso y ver los // ❌ de verdad, en rojo.

Aquí un TS ejecutable: los tipos guían mientras escribes, y al correr son JS puro:

Corre y ves Total: 6800. Los : Gasto[] y : number desaparecieron al ejecutar —pero mientras escribías, tu editor sabía exactamente qué campos tiene un Gasto y te habría gritado si sumabas g.balor.

Mini-reto

Manos al teclado, fuera del navegador: 1) crea una carpeta, pnpm add -D typescript tsx; 2) escribe bolsillo.ts con una función formatear(valor: number): string que devuelva el valor en pesos; 3) ejecútalo con pnpm tsx bolsillo.ts y luego compílalo con pnpm tsc bolsillo.ts y ABRE el .js generado —confirma con tus ojos que los : number y : string ya no están.

Qué sigue

Ya compilas TS. Pero al correr tsc --init apareció un tsconfig.json lleno de opciones. La próxima lección lo abre y te explica las que de verdad importan —empezando por la más importante de todas, strict, la que decide cuánta red te pone TypeScript.