¿Qué es TypeScript y por qué deberías aprenderlo?

Mira nene, si estás en el mundo del desarrollo web y no has escuchado hablar de TypeScript, o llevas viviendo debajo de una piedra o afeitas bombillas. TypeScript está por todos lados: ofertas de trabajo, repos de GitHub, frameworks modernos…

Este es el primer post de una serie para entender y aprender lo genial que es TypeScript así que EA, vamos al lio.

---

1. ¿Qué es TypeScript exactamente?

TypeScript es un superset 💡 superset Un lenguaje que extiende a otro. Todo código JavaScript válido es automáticamente código TypeScript válido, pero TypeScript añade funcionalidades extra como el tipado estático. Más info → de JavaScript. Esto significa que todo el código JS que escribes hoy ya es código TypeScript válido. La diferencia es que TS (¡TypeScript, pavo!) le añade una capa de tipado estático 💡 tipado estático Sistema que verifica los tipos de datos (number, string, boolean...) en tiempo de compilación, antes de que el código se ejecute. Si hay un error de tipos, no compila. Más info → .

Mientras que en JavaScript eres libre de hacer auténticas barbaridades (como sumar un número con un array y que no pete hasta producción), TypeScript actúa como ese compañero de equipo que TODO LO VE y que te revisa el código en tiempo real y te dice: “Ojito eh, que esto va a petar más tarde”.

¿Por qué la industria lo ama?

Dato curioso: ¿Sabías que VisualStudio Code está programado en TypeScript? La integración entre ambos es perfecta, por eso el autocompletado funciona tan tan bien.

---

2. El gran mito: “TypeScript me ahorra código”

Aquí es donde muchos se confunden y hay que ser honesto. TypeScript NO te ahorra código. De hecho, vas a escribir un poquito más. Pero escribes más ahora para sufrir menos después.

¿Prefieres invertir 5 minutos definiendo un tipo, o 3 horas depurando un undefined is not a function en producción un viernes a las 8 de la tarde? Pos claro, nene.

---

3. Tiempo de compilación vs. tiempo de ejecución

Este es el concepto más importante que debes aprender hoy. Si te quedas con una sola cosa de este post, que sea esta.

TypeScript funciona en dos fases:

1. Tiempo de compilación (Desarrollo): Tú escribes archivos .ts, el compilador (tsc) 💡 compilador (tsc) El compilador de TypeScript (tsc) analiza tu código, verifica los tipos y lo transforma en JavaScript plano que el navegador o Node.js pueda ejecutar. Más info → revisa los tipos y, si todo está bien, lo transforma en .js.
2. Tiempo de ejecución (Navegador/Node): El navegador solo entiende JavaScript. En este punto, TypeScript desaparece por completo.

Mira cómo funciona la compilación en la práctica, dale al play ehh:

¿Lo ves? El archivo .js generado no tiene ni rastro de tipos. Los : string han desaparecido. TypeScript ha hecho su trabajo durante la compilación y se ha ido a su casa.

Ojito con esto: TypeScript no valida datos que vienen de una API o de un formulario en tiempo real. Su trabajo termina cuando el código se compila. Si una API te devuelve un string donde esperabas un number, TypeScript no te va a salvar en producción. Para eso necesitas validación en runtime (con librerías como Zod Zod Librería de validación de esquemas en TypeScript que funciona tanto en compilación como en ejecución. ).

---

4. JavaScript vs. TypeScript: la diferencia visual

Vamos con un ejemplo clásico. Imagina una función que calcula el precio con IVA:

En JavaScript ⚠️

function calcularTotal(precio) {
    return precio + precio * 0.21;
}

// Nadie me impide pasarle un String
// Resultado: "10021" (concatena en vez de sumar)
console.log(calcularTotal('100'));

Pa flipar, ¿eh? JavaScript no te dice nada. Le pasas un string y él tan feliz te concatena "100" + "21" = "10021". Y tú ahí buscando el bug cuál bobo.

En TypeScript ✅

function calcularTotal(precio: number): number {
    return precio + precio * 0.21;
}

// ❌ Error: Argument of type 'string' is not assignable
//    to parameter of type 'number'.
calcularTotal('100');

// ✅ Esto sí funciona
calcularTotal(100); // → 121

El editor te pone un subrayado rojo antes de que ejecutes nada y así te ahorras el disgusto.

---

5. Más allá de lo básico: ejemplos prácticos

Venga, vamos a ver ejemplos más reales, de los que te encuentras en el día a día.

Tipar un objeto de usuario

// Definimos la forma que tiene un usuario
interface Usuario {
    id: number;
    nombre: string;
    email: string;
    activo: boolean;
    rol: 'admin' | 'editor' | 'lector'; // Solo estos 3 valores
}

// Ahora el editor sabe EXACTAMENTE qué tiene un usuario
function mostrarSaludo(usuario: Usuario): string {
    // Autocompletado: al escribir "usuario."
    // te sugiere: id, nombre, email, activo, rol
    return `Bienvenido, ${usuario.nombre} (${usuario.rol})`;
}

// ❌ Error: falta la propiedad 'activo'
const yo: Usuario = {
    id: 1,
    nombre: 'Domin',
    email: 'hola@domin.es',
    rol: 'admin',
};

// ❌ Error: 'superadmin' no es asignable a 'admin' | 'editor' | 'lector'
const otro: Usuario = {
    id: 2,
    nombre: 'Pepe',
    email: 'pepe@mail.com',
    activo: true,
    rol: 'superadmin',
};

Funciones con tipos genéricos

Esto ya es nivel intermedio, pero pa que veas el potencial:

// Una función que funciona con CUALQUIER tipo,
// pero mantiene la seguridad
function primerElemento<T>(array: T[]): T | undefined {
    return array[0];
}

// TypeScript INFIERE el tipo automáticamente
const num = primerElemento([1, 2, 3]); // tipo: number | undefined
const str = primerElemento(['a', 'b', 'c']); // tipo: string | undefined

// Y te protege de errores
if (num !== undefined) {
    console.log(num.toFixed(2)); // ✅ Sabe que es number
}

Tipar la respuesta de una API

Esto te va a encantar si trabajas con fetch fetch Función nativa del navegador y Node.js para hacer peticiones HTTP a APIs. :

interface Post {
    id: number;
    title: string;
    body: string;
    userId: number;
}

async function obtenerPosts(): Promise<Post[]> {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts');
    const data: Post[] = await response.json();

    // Ahora "data" tiene autocompletado completo:
    // data[0].title ✅
    // data[0].autor ❌ (no existe en la interfaz)
    return data;
}

---

6. Comparativa rápida

---

7. ¿Cuándo usar TypeScript?

EA la pregunta del millón. ¿Siempre hay que usar TypeScript? POs No, nene. Aquí va una guía rápida:

---

8. ¿Qué necesitas para empezar?

La barrera de entrada es bajísima. No necesitas montar un servidor ni configurar nada raro para tus primeras pruebas:

Y si quieres instalarlo en local, es un momento:

---

9. Checklist: tu ruta para empezar con TypeScript

¿Te ha convencido? Aquí tienes un checklist para ir paso a paso. Ve marcando conforme avances:

---

Conclusión

Aprender TypeScript no es aprender un lenguaje nuevo desde cero. Es aprender a darle superpoderes al JavaScript que ya conoces. Te hace mejor desarrollador porque te obliga a pensar en la estructura de tus datos antes de empezar a picar código como un loco.

¿Que al principio es un poco más lento? Sí. ¿Que merece la pena? Yes!. Pregúntale a cualquier dev que haya mantenido un proyecto grande en JavaScript vanilla… las historias de terror que te contará.

En el próximo post entraremos en materia y veremos cómo TypeScript es capaz de inferir tipos sin que tú tengas que escribir ni una sola anotación, de locos tt.

EA, nos vemos en los bares 🍻

---

Pon a prueba lo aprendido