¿Qué es TypeScript?

Imagina que entregas una tienda en línea y, una semana después, el cliente te llama: "el total del carrito sale como 1002003". Alguien sumó textos en vez de números. En JavaScript ese error pasa desapercibido hasta que un usuario real lo ve. TypeScript existe para atrapar ese tipo de errores mientras escribes, no cuando ya es tarde.

En esta lección entenderás qué es TypeScript, cómo se relaciona con JavaScript y cuándo vale la pena usarlo.

Concepto

TypeScript es un lenguaje creado por Microsoft (2012) que es un superset de JavaScript: todo código JavaScript válido también es TypeScript válido. Encima de JS agrega una sola gran cosa: un sistema de tipos.

Piénsalo como un corrector ortográfico para tu código. Word no cambia lo que escribes, pero subraya en rojo lo que parece un error. TypeScript hace lo mismo: lee tu código, entiende qué tipo de dato hay en cada lugar y te subraya las inconsistencias.

// Esto es JavaScript... y también es TypeScript válido
const saludo = 'Hola';

// Esto es TypeScript: le decimos a qué tipo pertenece cada cosa
const precio: number = 349;
const nombre: string = 'Teclado mecánico';
const disponible: boolean = true;

Lo importante: los navegadores y Node no entienden TypeScript directamente. Antes de ejecutarlo, se compila (o "transpila") a JavaScript normal. En ese paso los tipos se borran por completo.

archivo.ts  ──(compilador tsc)──►  archivo.js  ──►  navegador / Node
  con tipos       revisa errores     sin tipos

Tipado dinámico vs. estático

JavaScript tiene tipado dinámico: una variable puede contener cualquier tipo y cambiar en cualquier momento. Los errores de tipo aparecen al ejecutar.

// JavaScript
let total = 100;
total = 'cien';        // permitido
total.toFixed(2);      // 💥 TypeError en tiempo de ejecución

TypeScript agrega tipado estático: los tipos se revisan antes de ejecutar, analizando el código.

// TypeScript
let total = 100;       // TS infiere que total es number
total = 'cien';        // ❌ Error: Type 'string' is not assignable to type 'number'

El error aparece en tu editor con una línea roja, antes de guardar, antes de subir a producción.

Estático no significa "rígido"

TypeScript infiere la mayoría de los tipos por ti. No necesitas anotar cada variable: let total = 100 ya sabe que es number. Anotas sobre todo en los "bordes": parámetros de funciones, respuestas de APIs y props de componentes.

Ejemplo: errores que TypeScript evita

Este es código JavaScript con cuatro bugs muy comunes. Ninguno da error hasta que se ejecuta:

// carrito.js
function calcularTotal(productos) {
  return productos.reduce((suma, p) => suma + p.precio, 0);
}

const productos = [
  { nombre: 'Mouse', precio: '349' },        // bug 1: precio como texto
  { nombre: 'Teclado', preico: 1299 }        // bug 2: typo en "precio"
];

calcularTotal(productos);                    // '0349undefined' 😱
calcularTotal();                             // bug 3: olvidé el argumento → TypeError
const usuario = null;
console.log(usuario.nombre);                 // bug 4: acceso a null → TypeError

La versión en TypeScript describe la forma de los datos y el editor marca cada problema:

// carrito.ts
interface Producto {
  nombre: string;
  precio: number;
}

function calcularTotal(productos: Producto[]): number {
  return productos.reduce((suma, p) => suma + p.precio, 0);
}

const productos: Producto[] = [
  { nombre: 'Mouse', precio: '349' },
  //                 ❌ Type 'string' is not assignable to type 'number'
  { nombre: 'Teclado', preico: 1299 }
  //                   ❌ Object literal may only specify known properties.
  //                      Did you mean to write 'precio'?
];

calcularTotal();
// ❌ Expected 1 arguments, but got 0.

const usuario: { nombre: string } | null = null;
console.log(usuario.nombre);
// ❌ 'usuario' is possibly 'null'.

Además de los errores, ganas autocompletado: al escribir p. dentro del reduce, el editor te sugiere nombre y precio. Esto, en un proyecto con cientos de archivos, ahorra horas.

Qué NO hace TypeScript

Es importante tener expectativas claras:

• No revisa datos en tiempo de ejecución. Si una API te manda precio: "349" cuando dijiste que era number, TypeScript no se entera: los tipos ya no existen al ejecutar. Para eso se validan los datos (lo verás en Narrowing).
• No hace tu código más rápido. El JavaScript que genera es básicamente el mismo que escribirías a mano.
• No reemplaza las pruebas. Atrapa errores de tipo, no errores de lógica (por ejemplo, aplicar un descuento del 50% en vez del 5%).

Error común

Pensar que "si compila, funciona". TypeScript garantiza que los tipos son coherentes según lo que tú le dijiste. Si le mientes (con any o con as), te cree. Los tipos son tan buenos como la información que les das.

Cómo se ve la compilación

Si escribes esto:

// saludo.ts
function saludar(nombre: string, veces: number = 1): string {
  return `Hola, ${nombre}! `.repeat(veces);
}

console.log(saludar('Ana', 2));

El compilador genera esto (los tipos desaparecen):

// saludo.js
function saludar(nombre, veces = 1) {
  return `Hola, ${nombre}! `.repeat(veces);
}

console.log(saludar('Ana', 2));

En la siguiente lección instalarás el compilador y verás este proceso en tu máquina.

¿Quién usa TypeScript?

• Frameworks: Angular está escrito en TS; Vue 3, Svelte, Astro y Next.js también. React tiene tipos oficiales mantenidos por la comunidad.
• Herramientas: VS Code está escrito en TypeScript. Vite, Prisma, tRPC, Zod y Playwright también.
• Empresas: Microsoft, Google, Airbnb, Slack, Stripe, Mercado Libre y miles de startups.
• Backend: NestJS, Express con tipos, Deno y Bun ejecutan TypeScript de forma nativa. Node también puede ejecutar archivos .ts simples quitando los tipos.

Airbnb publicó que, al analizar sus bugs, cerca del 38% se habrían evitado con TypeScript. No es magia, pero es mucho.

¿Cuándo sí y cuándo no?

Úsalo cuando:

• El proyecto va a durar meses o años y tendrá mantenimiento.
• Trabajas en equipo (los tipos son documentación que no se desactualiza).
• Consumes APIs con muchos datos o construyes una API.
• Usas React, Vue, Next.js o Node para proyectos de clientes.
• Quieres refactorizar sin miedo: cambias un nombre y TS te dice todos los lugares afectados.

Quizá no lo necesites cuando:

• Es un script de 30 líneas que usarás una vez.
• Es una landing page con un par de interacciones en JS.
• Estás aprendiendo JavaScript por primera vez: primero domina JS, luego agrega tipos.

Buena práctica

Si dudas, empieza con TypeScript. Configurar un proyecto nuevo con Vite y TS toma lo mismo que hacerlo con JS, y migrar después cuesta mucho más que empezar tipado.

Ejercicios

1. Explica con tus palabras la diferencia entre tipado dinámico y estático. Da un ejemplo de error que solo verías al ejecutar en JS.
2. ¿Qué crees que pasa con esta línea en TypeScript? let edad = 25; edad = '25';
3. Encuentra los errores que TypeScript marcaría aquí:

interface Usuario {
  nombre: string;
  email: string;
}

const u: Usuario = { nombre: 'Luis', correo: 'luis@mail.com' };
const largo: number = u.nombre;

4. Menciona dos situaciones de un proyecto para un cliente donde TypeScript te ahorraría tiempo.

Ver solución

1. En tipado dinámico (JS) los tipos se revisan al ejecutar y una variable puede cambiar de tipo libremente; en estático (TS) se revisan antes de ejecutar, analizando el código. Ejemplo de error que solo verías al ejecutar en JS: const user = null; user.nombre lanza TypeError.

2. Error: Type 'string' is not assignable to type 'number', porque TS infirió number en la primera asignación.

3. Dos errores:

const u: Usuario = { nombre: 'Luis', correo: 'luis@mail.com' };
// ❌ 'correo' no existe en Usuario y falta 'email'

const largo: number = u.nombre;
// ❌ u.nombre es string, no number (quizá querías u.nombre.length)

4. Ejemplos: al consumir la API de pagos (saber exactamente qué campos llegan), al refactorizar el modelo de producto (TS te marca cada archivo afectado), al pasar props a componentes (no olvidar uno obligatorio).

Resumen

• TypeScript es JavaScript + un sistema de tipos; todo JS válido es TS válido.
• Usa tipado estático: revisa los tipos antes de ejecutar, en tu editor.
• Se compila a JavaScript; los tipos se borran y no existen en tiempo de ejecución.
• Evita errores comunes: typos en propiedades, tipos equivocados, argumentos faltantes y accesos a null.
• No valida datos externos ni reemplaza pruebas.
• Es el estándar para proyectos profesionales que crecen y se mantienen.

Siguiente: Instalación y tsconfig