¿Qué es TypeScript?

TypeScript es JavaScript con tipos. Escribes el mismo código que ya conoces, pero puedes indicar qué clase de dato guarda cada variable, qué recibe cada función y qué devuelve. Con esa información, TypeScript revisa tu programa antes de ejecutarlo y te avisa de errores que en JavaScript solo descubrirías al probarlo (o cuando ya lo está usando otra persona). En esta lección verás qué es exactamente, qué problemas evita, dónde se usa y cómo probarlo sin instalar nada.

JavaScript con tipos

TypeScript lo creó Microsoft en 2012 y hoy es uno de los lenguajes más usados en desarrollo web. Tiene tres ideas clave:

1. Es un superconjunto de JavaScript: todo código JavaScript válido es también TypeScript válido. No tienes que aprender un lenguaje nuevo, sino unas cuantas piezas extra.
2. Tiene tipado estático: los tipos se comprueban mientras escribes, sin ejecutar el código. JavaScript, en cambio, tiene tipado dinámico: el tipo de una variable solo se conoce cuando el programa está funcionando.
3. Se compila a JavaScript: un programa llamado compilador (tsc) revisa el código y genera un archivo .js normal, sin tipos. Ese archivo es el que se ejecuta en el navegador o en Node.js.

Mira un archivo precio.ts:

function precioConIva(precio: number, iva: number): number {
  return precio * (1 + iva);
}

const total: number = precioConIva(50, 0.21);
console.log(total);
// 60.5

Lo nuevo son las anotaciones de tipo: los : number que aparecen detrás de los parámetros, de la función y de la variable. Al compilarlo, se obtiene este precio.js:

function precioConIva(precio, iva) {
  return precio * (1 + iva);
}

const total = precioConIva(50, 0.21);
console.log(total);
// 60.5

Es exactamente el mismo programa sin las anotaciones. Los tipos sirven para comprobar el código, no cambian lo que hace.

Nota: el navegador no entiende TypeScript. Siempre hay un paso que quita los tipos antes de ejecutar: el compilador, una herramienta como Vite o el propio Node.js en sus versiones recientes. Lo verás en la lección Instalar y compilar.

Qué problemas evita

La mejor forma de entender TypeScript es ver errores que JavaScript deja pasar. Todos estos programas son JavaScript válido, arrancan sin quejarse y fallan (o dan un resultado absurdo) al ejecutarse.

Erratas en propiedades

const socio = { nombre: "Lucía", cuota: 35 };
console.log(`Cuota de ${socio.nombre}: ${socio.couta} €`);
// Cuota de Lucía: undefined €

couta no existe, así que JavaScript devuelve undefined en silencio. El mismo código en TypeScript no llega ni a compilar:

const socio = { nombre: "Lucía", cuota: 35 };
console.log(`Cuota de ${socio.nombre}: ${socio.couta} €`);
// Error: Property 'couta' does not exist on type '{ nombre: string; cuota: number; }'.
//        Did you mean 'cuota'?

Fíjate en que no hemos escrito ningún tipo: TypeScript ha deducido la forma del objeto a partir de su valor. Esto se llama inferencia y hace que gran parte del código TypeScript se parezca muchísimo al JavaScript normal.

Métodos que no existen

const ciudad = "santander";
console.log(ciudad.toUppercase());
// TypeError: ciudad.toUppercase is not a function

Aquí el programa se rompe al llegar a esa línea. Si estuviera dentro de un botón, el error solo aparecería cuando alguien lo pulsara. TypeScript lo ve al escribirlo:

const ciudad = "santander";
console.log(ciudad.toUppercase());
// Error: Property 'toUppercase' does not exist on type '"santander"'.
//        Did you mean 'toUpperCase'?

Mezclar textos y números

Los datos de un formulario siempre llegan como texto. Si se te olvida convertirlos, + concatena en vez de sumar:

function sumarPuntos(actuales, nuevos) {
  return actuales + nuevos;
}

const delFormulario = "15";
console.log(sumarPuntos(100, delFormulario));
// 10015

Ningún error, solo un resultado equivocado que puede acabar guardado en una base de datos. Con tipos en los parámetros, TypeScript señala la llamada incorrecta:

function sumarPuntos(actuales: number, nuevos: number): number {
  return actuales + nuevos;
}

const delFormulario = "15";
console.log(sumarPuntos(100, delFormulario));
// Error: Argument of type 'string' is not assignable to parameter of type 'number'.

La solución es convertir antes: sumarPuntos(100, Number(delFormulario)).

Valores que pueden no existir

Este es el error más común en JavaScript. find devuelve undefined si no encuentra nada, y es fácil olvidarlo:

const rutas = [
  { nombre: "Picos de Europa", km: 12 },
  { nombre: "Costa Quebrada", km: 8 },
];

const ruta = rutas.find((r) => r.km > 20);
console.log(ruta.nombre);
// TypeError: Cannot read properties of undefined (reading 'nombre')

TypeScript sabe que find puede devolver undefined y te obliga a tenerlo en cuenta:

const rutas = [
  { nombre: "Picos de Europa", km: 12 },
  { nombre: "Costa Quebrada", km: 8 },
];

const ruta = rutas.find((r) => r.km > 20);
console.log(ruta.nombre);
// Error: 'ruta' is possibly 'undefined'.

Para corregirlo basta con comprobar que existe:

const rutas = [
  { nombre: "Picos de Europa", km: 12 },
  { nombre: "Costa Quebrada", km: 8 },
];

const ruta = rutas.find((r) => r.km > 20);
if (ruta) {
  console.log(ruta.nombre);
} else {
  console.log("No hay rutas tan largas");
}
// No hay rutas tan largas

Esta técnica de comprobar un valor para que TypeScript sepa más sobre él se llama narrowing (estrechar tipos) y tiene su propia lección: Estrechar tipos.

Argumentos que faltan

function crearReserva(pista: string, hora: number, jugadores: number) {
  return `Pista ${pista} a las ${hora}:00 para ${jugadores}`;
}

console.log(crearReserva("3", 18));
// Error: Expected 3 arguments, but got 2.

En JavaScript, jugadores valdría undefined y el texto diría “para undefined”.

Los tipos desaparecen al ejecutar

Hay una idea importante que conviene tener clara desde el principio: TypeScript solo comprueba lo que puede ver en el código. Cuando el programa se ejecuta, los tipos ya no existen.

Eso significa que si un dato viene de fuera (la respuesta de una API con fetch, lo que escribe un usuario, un archivo JSON), TypeScript no puede saber qué contiene de verdad. Si tú le dices “esto es un número” y el servidor manda un texto, el programa fallará igual que en JavaScript. Para esos datos hay que validar en tiempo de ejecución, con typeof, comprobaciones propias o librerías pensadas para ello (como Zod).

Cuidado: que tu código compile sin errores no significa que no tenga fallos. TypeScript elimina una categoría entera de errores (los de tipos), pero los errores de lógica siguen siendo cosa tuya.

Más que encontrar errores: el editor te ayuda

Como el editor sabe el tipo de cada cosa, puede ayudarte mucho más que con JavaScript:

• Autocompletado preciso: al escribir socio. te muestra solo nombre y cuota.
• Documentación al pasar el ratón: ves qué parámetros espera una función y qué devuelve.
• Renombrar con seguridad: cambias el nombre de una propiedad y se actualiza en todos los archivos donde se usa.
• Errores en rojo al momento: sin ejecutar ni abrir la consola.

En proyectos grandes, o cuando vuelves a un código que escribiste hace meses, esto ahorra muchísimo tiempo. Los tipos funcionan también como documentación que nunca se queda desactualizada, porque si no coincide con el código, no compila.

Dónde se usa TypeScript

Hoy TypeScript es lo habitual en proyectos profesionales de JavaScript:

• Angular: está escrito en TypeScript y lo usa de forma obligatoria.
• React: la mayoría de proyectos nuevos usan archivos .tsx (TypeScript con JSX). Frameworks como Next.js lo configuran solos.
• Vue, Svelte y Astro: tienen soporte completo. Esta misma web está hecha con Astro y tiene archivos .ts.
• Node.js: en el servidor se usa con Express o con frameworks como NestJS, que está pensado para TypeScript.
• Deno y Bun: son entornos de ejecución alternativos a Node que ejecutan archivos .ts directamente, sin configurar nada.

También lo usan herramientas que manejas a diario: Visual Studio Code está escrito en TypeScript. Y en las ofertas de empleo de desarrollo web es una de las tecnologías más pedidas junto a JavaScript.

Ventajas e inconvenientes

TypeScript no es gratis: añade un paso más y algo de sintaxis. Este es el balance:

Ventajas	Inconvenientes
Detecta errores antes de ejecutar	Hay que compilar o usar una herramienta que quite los tipos
Autocompletado y ayuda del editor mucho mejores	Más sintaxis que aprender (tipos, interfaces, genéricos…)
El código se documenta solo	Al principio, los mensajes de error asustan un poco
Cambiar código grande es más seguro	No comprueba datos externos en tiempo de ejecución
Muy pedido en el mercado laboral	En scripts de 20 líneas puede ser más lío que ayuda

Para un script pequeño de un solo uso, JavaScript va bien. Para cualquier proyecto que vaya a crecer, que toques durante meses o en el que trabaje más de una persona, TypeScript compensa con creces.

Probarlo sin instalar: el Playground

Antes de instalar nada puedes experimentar en el TypeScript Playground, el editor online oficial: typescriptlang.org/play.

1. A la izquierda escribes TypeScript. Los errores aparecen subrayados en rojo; pasa el ratón por encima para leer el mensaje.
2. A la derecha, la pestaña .JS muestra el JavaScript que genera el compilador. Es la mejor forma de ver que los tipos desaparecen.
3. La pestaña Errors lista todos los errores, y Logs muestra los console.log cuando pulsas Run.
4. En TS Config puedes cambiar opciones del compilador, como la versión de JavaScript que se genera.

Prueba a copiar los ejemplos de esta lección y a corregir los errores. También puedes compartir tu código con un enlace, muy útil para preguntar dudas.

Consejo: el Playground tiene activadas por defecto las comprobaciones estrictas (strict), igual que este curso. Todos los ejemplos están pensados para ese modo, que es el que se usa en proyectos reales.

Cómo es este curso

El curso da por hecho que ya sabes JavaScript: variables, funciones, arrays, objetos y clases. Si no, empieza por el curso de JavaScript. Las lecciones van así:

• Instalar el compilador y configurar un proyecto: Instalar y compilar.
• Los tipos básicos, arrays, objetos, uniones y funciones con tipos.
• Cómo TypeScript “estrecha” un tipo cuando haces comprobaciones.
• Clases, enums, genéricos y tipos utilitarios.
• Módulos, configuración y uso con el DOM.
• Un proyecto final: una lista de tareas.

Errores frecuentes

• Pensar que TypeScript es otro lenguaje distinto: es JavaScript con tipos. Todo lo que sabes de JavaScript sigue valiendo; si algo te funciona en JavaScript, funciona igual en TypeScript.
• Creer que los tipos se comprueban al ejecutar: desaparecen al compilar. Los datos que vienen de una API o de un formulario hay que validarlos igualmente.
• Abrir un archivo .ts directamente en el navegador: no funciona. Hay que compilarlo a .js o usar una herramienta como Vite.
• Ignorar los errores “porque el JavaScript se genera igual”: por defecto tsc genera el .js aunque haya errores de tipos. Si los ignoras, pierdes toda la ventaja.
• Llenar el código de anotaciones innecesarias: TypeScript deduce muchos tipos solo. En Tipos básicos verás cuándo merece la pena escribirlos.

Resumen

Concepto	Lo esencial
TypeScript	JavaScript con tipos, creado por Microsoft
Superconjunto	Todo JavaScript válido es TypeScript válido
Tipado estático	Los tipos se comprueban antes de ejecutar
Compilar	tsc quita los tipos y genera JavaScript normal
Inferencia	TypeScript deduce tipos sin que los escribas
Qué detecta	Erratas, métodos inexistentes, tipos mezclados, valores undefined, argumentos de menos
Qué no detecta	Errores de lógica y datos externos incorrectos
Dónde se usa	Angular, React, Vue, Astro, Node.js, Deno, Bun
Playground	typescriptlang.org/play, para probar sin instalar

En la siguiente lección instalarás TypeScript y compilarás tu primer archivo: Instalar y compilar.

const socio = { nombre: "Lucía", cuota: 35 };
console.log(socio.couta);

const rutas = [{ nombre: "Cares", km: 12 }];
const ruta = rutas.find((r) => r.km > 20);
console.log(ruta.nombre);