Introducción a TypeScript

A lo largo del curso has visto varias situaciones en las que JavaScript no avisa de un error:

• Escribes mal el nombre de una propiedad (usuario.nombr) y obtienes undefined en silencio.
• Llamas a una función con menos argumentos, o con un texto donde esperaba un número.
• Sumas un número y un texto y obtienes "53" en vez de 8.

Estos fallos solo se descubren al ejecutar el programa, y a veces mucho después, en producción. TypeScript existe para detectarlos mientras escribes el código.

Qué es TypeScript

TypeScript es un lenguaje creado por Microsoft en 2012. Es JavaScript con tipos: un superconjunto de JavaScript, lo que significa que todo código JavaScript válido es también TypeScript válido. Solo añade una cosa: poder indicar de qué tipo es cada dato.

El navegador no entiende TypeScript. Antes de ejecutarlo, se compila (se traduce) a JavaScript normal, quitando los tipos. Por eso funciona en cualquier navegador y en Node.js.

Hoy es muy popular: lo usan la mayoría de proyectos profesionales grandes, y frameworks como Angular, Astro, Next.js o NestJS lo traen de serie. Esta misma web, DevSchool, tiene algunos archivos en TypeScript (los .ts de la carpeta src/data).

Tipos básicos

Los tipos se escriben después del nombre, con dos puntos:

let nombre: string = "Ana";
let edad: number = 28;
let activo: boolean = true;
let etiquetas: string[] = ["html", "css"];

edad = "veintiocho";
// ✗ Error: Type 'string' is not assignable to type 'number'.

En muchos casos no hace falta escribir el tipo: TypeScript lo deduce solo (inferencia):

let ciudad = "Santander";   // TypeScript sabe que es string
ciudad = 42;                // ✗ error

Funciones

Lo más útil es tipar los parámetros y el valor devuelto de las funciones:

function calcularPrecio(precio: number, iva: number = 0.21): number {
  return precio * (1 + iva);
}

calcularPrecio(100);          // ✓
calcularPrecio("100");        // ✗ Argument of type 'string' is not assignable to parameter of type 'number'.
calcularPrecio();             // ✗ Expected 1-2 arguments, but got 0.

Objetos: interface y type

Puedes describir la forma de un objeto y reutilizarla:

interface Alumno {
  nombre: string;
  nota: number;
  email?: string;        // el ? indica que es opcional
}

function aprobado(alumno: Alumno): boolean {
  return alumno.nota >= 5;
}

const ana: Alumno = { nombre: "Ana", nota: 8 };
aprobado(ana);          // ✓
ana.nombr;              // ✗ Property 'nombr' does not exist. Did you mean 'nombre'?

Fíjate en el último error: justo el que JavaScript no detectaba. Además, el editor te autocompleta las propiedades de ana mientras escribes y te muestra la documentación de cada función. Solo por eso ya merece la pena.

type sirve para lo mismo y para más cosas, como los tipos unión, que admiten varios valores concretos:

type Estado = "pendiente" | "enviado" | "entregado";

let pedido: Estado = "enviado";   // ✓
pedido = "perdido";               // ✗ no es uno de los valores permitidos

any y unknown

• any desactiva la comprobación de tipos: vale cualquier cosa. Es una vía de escape, pero si lo usas mucho pierdes las ventajas de TypeScript.
• unknown significa “no sé qué es”: TypeScript te obliga a comprobarlo antes de usarlo. Es la opción segura para datos que vienen de fuera, como la respuesta de un servidor.

Cómo empezar a usarlo

La forma más sencilla es usar una herramienta que ya lo integre, como Vite o Astro: creas archivos .ts y funcionan sin configurar nada.

Para probarlo solo:

npm install -D typescript
npx tsc --init          # crea el archivo de configuración tsconfig.json
npx tsc                 # compila los .ts a .js

Las versiones recientes de Node.js también pueden ejecutar directamente archivos .ts sencillos, ignorando los tipos.

También puedes experimentar sin instalar nada en el TypeScript Playground (typescriptlang.org/play): escribes TypeScript a la izquierda y ves el JavaScript resultante y los errores a la derecha.

¿Lo aprendo ya?

Primero aprende bien JavaScript: TypeScript no cambia cómo funciona el lenguaje, solo añade comprobaciones, así que todo lo que sabes sigue sirviendo. Cuando te sientas cómodo con JavaScript y empieces proyectos de cierto tamaño, pásate a TypeScript. Es una de las habilidades más pedidas en las ofertas de desarrollo web.

interface Alumno { nombre: string; nota: number }
const a: Alumno = { nombre: "Ana", nota: 8 };
console.log(a.nombr);