Lección 71 — Introducción a TypeScript

🧠 Concepto

TypeScript es un superset de JavaScript creado por Microsoft que añade tipado estático opcional al lenguaje. Esto significa que todo el código JS válido también es TS válido, pero TypeScript agrega herramientas para describir la forma de los datos.

El código TypeScript no se ejecuta directamente en el navegador o en Node.js. Primero debe ser compilado (transpilado) a JavaScript mediante el comando tsc. El resultado es JS limpio que puede ejecutarse en cualquier entorno.

// TypeScript
function saludar(nombre: string): string {
  return `Hola, ${nombre}`;
}

// JavaScript compilado
function saludar(nombre) {
  return "Hola, " + nombre;
}

Ventajas principales

• Detección temprana de errores: El compilador atrapa errores de tipo antes de ejecutar una sola línea.
• Autocompletado inteligente: Los editores (VS Code, WebStorm) usan la información de tipos para ofrecer sugerencias precisas.
• Refactorización segura: Cambiar el nombre de una propiedad actualiza automáticamente todas sus referencias.
• Documentación viva: Los tipos funcionan como documentación ejecutable que nunca se desactualiza.

Desventajas

• Curva de aprendizaje: Hay que aprender el sistema de tipos, genéricos, decoradores, etc.
• Configuración inicial: Requiere un archivo tsconfig.json y herramientas de build.
• Fricción en proyectos pequeños: Para scripts muy simples, TypeScript puede sentirse excesivo.

💻 Ejemplo

Mira este contraste entre JS y TS:

// JavaScript (se descubre el error hasta ejecutar)
function sumar(a, b) {
  return a + b;
}
sumar(5, '3'); // → '53' (concatenación, no suma)

// TypeScript (el error aparece al escribir)
function sumarTS(a: number, b: number): number {
  return a + b;
}
sumarTS(5, '3'); // ❌ Error: Argument of type 'string' is not assignable to parameter of type 'number'

📝 Ejercicio

Toma esta función JS que suma precios de un carrito:

function calcularTotal(items) {
  return items.reduce((total, item) => total + item.precio, 0);
}

Pásala a TypeScript añadiendo los tipos necesarios: un array de objetos con nombre: string y precio: number. La función debe retornar number.

⚠️ Nota

TypeScript no es un lenguaje completamente diferente. Piensa en él como “JavaScript con anotaciones”. Puedes migrar un proyecto JS a TS gradualmente: cambia un archivo a la vez, renombra .js a .ts y empieza a añadir tipos.

🎯 Tip

Usa tsc --noEmit en tu pipeline de CI para verificar tipos sin generar archivos JS. Así detectas errores sin ensuciar el directorio de salida.