Introducción a TypeScript: Los Tipos que Salvan tu Código

TypeScript es un superconjunto tipado de JavaScript creado por Microsoft en 2012. Esto significa que todo código JavaScript válido es también código TypeScript válido, pero TypeScript añade una capa de sistema de tipos estáticos que detecta errores en tiempo de compilación, antes de que tu código llegue al navegador o al servidor. Imagina que tienes una función que recibe un nombre de usuario y lo convierte a mayúsculas. En JavaScript puro, nada te impide pasar un número o un objeto a esa función, provocando un error silencioso en producción. TypeScript te avisará inmediatamente: "Este argumento debe ser de tipo string, pero estás pasando un number".

La base de TypeScript son las anotaciones de tipo, que se escriben después del nombre de la variable usando dos puntos. Los tipos primitivos principales son: string: cadenas de texto. number: números enteros y decimales (no hay distinción como en otros lenguajes). boolean: verdadero o falso. null y undefined: ausencia de valor. any: desactiva la verificación de tipos (usar con extrema precaución). unknown: como any, pero más seguro porque obliga a verificar el tipo antes de usarlo.

Las interfaces definen la forma (shape) de un objeto: qué propiedades tiene, de qué tipo es cada una, y cuáles son opcionales. Es como un contrato que asegura que un objeto tiene exactamente la estructura esperada. Los type aliases (definidos con la palabra clave `type`) son similares pero más flexibles: pueden definir uniones, intersecciones y tipos complejos que las interfaces no pueden. La regla general es: usa interfaces para objetos y tipos para uniones y combinaciones.

Los genéricos son la herramienta más poderosa de TypeScript para crear componentes y funciones reutilizables sin perder la seguridad de tipos. Se definen con la sintaxis de ángulos `<T>` donde T es un tipo variable que se determina cuando se usa la función. Por ejemplo, una función `obtenerPrimero<T>(lista: T[]): T` funciona con arrays de cualquier tipo (números, strings, objetos) y siempre retorna el tipo correcto. Sin genéricos, tendrías que usar `any` y perderías toda la protección del sistema de tipos.

React y TypeScript forman una combinación extraordinariamente productiva. Puedes tipar las props de tus componentes con interfaces, asegurando que siempre reciben los datos correctos. Los hooks como useState pueden inferir tipos automáticamente o recibir tipos explícitos para estados complejos. El autocompletado del IDE mejora drásticamente, los errores se detectan antes de ejecutar el código, y la documentación de tu código se vuelve implícita. No es casualidad que proyectos de referencia como Next.js, Remix y Astro estén escritos completamente en TypeScript.