¿Qué es TypeScript? Guía sencilla para no programadores

TypeScript es JavaScript con tipos. Añades etiquetas que indican qué clase de dato debe ser cada valor (un número, un texto, una lista de pedidos), y TypeScript comprueba que tu código no tenga incoherencias antes de ejecutarse. El sitio de TypeScript lo describe como «JavaScript con sintaxis para tipos»: los tipos se eliminan al convertir el código en JavaScript normal, que funciona en cualquier lugar donde funcione JavaScript.

Por qué importa cuando creas con IA

Los modelos de IA escriben código rápido, y el código rápido tiene errores: un campo llamado customerName en un archivo y customer_name en otro, un precio pasado como texto en lugar de como número, una función llamada sin un valor. En JavaScript puro, muchos de esos errores solo aparecen cuando alguien pulsa el botón equivocado.

TypeScript detecta muchos de ellos antes, mientras se escribe el código:

• La IA recibe retroalimentación inmediata. Los errores de tipo señalan la línea exacta que está mal, y el agente puede corregirla antes de que tú lo veas.
• Los cambios son más seguros. Si renombras un campo, TypeScript marca cada lugar que sigue usando el nombre antiguo.
• El código se explica solo. Los tipos documentan qué espera y qué devuelve una función, lo que ayuda a ti, a la IA y a cualquier desarrollador que trabaje en él después.
• Los editores son más inteligentes. El autocompletado y «ir a la definición» funcionan mejor porque el editor sabe qué es cada valor.

Esta es una razón importante por la que muchos creadores de apps con IA usan TypeScript por defecto.

Una analogía cotidiana

Piensa en un almacén de envíos con zonas etiquetadas. Cada zona tiene un cartel: «Solo palés», «Refrigerado», «Máximo 500 kg». Cuando llega un pedido, un revisor en la puerta compara la mercancía con el cartel. El pescado congelado destinado a la zona de productos secos se detiene en la puerta, no se descubre una semana después, cuando ya huele mal.

TypeScript es el revisor de la puerta. Los tipos son los carteles. La comprobación se hace antes de que la mercancía (tu código) entre en uso. Y, una vez todo está en su sitio, los carteles se retiran: el JavaScript que se ejecuta ya no tiene tipos.

Cómo funciona TypeScript

1. Tú (o la IA) escribes archivos .ts o .tsx: TypeScript, con etiquetas de tipo.
2. El verificador de tipos lee el código e informa de las incoherencias como errores en el editor o en la construcción.
3. Un paso de construcción elimina los tipos, generando JavaScript normal.
4. El JavaScript se ejecuta en el navegador o en un servidor (Node.js, Deno, Bun).

Una consecuencia importante: TypeScript comprueba el código que escribiste, no los datos que llegan mientras la app se ejecuta. Si una API externa devuelve algo inesperado, TypeScript no lo ve a menos que añadas validación en tiempo de ejecución.

Un ejemplo práctico: un formulario de reservas

Imagina que construyes una app de reservas para una peluquería. Este es un tipo que describe una reserva:

type Booking = {
  id: number;
  customerEmail: string;
  service: "haircut" | "colour" | "blow-dry";
  startsAt: Date;
  price: number;
  notes?: string; // el ? indica que es opcional
};

Y una función que calcula una señal de reserva:

function depositFor(booking: Booking): number {
  return booking.price * 0.2;
}

Ahora mira lo que detecta TypeScript.

Un campo mal escrito.

depositFor({ id: 1, customerEmail: "lena@example.com", service: "haircut",
  startsAt: new Date(), prise: 40 });

TypeScript informa de que prise no es una propiedad conocida y de que falta price. En JavaScript puro, esto calcularía en silencio una señal de NaN (no es un número).

El tipo de valor equivocado.

const booking: Booking = { ...otherFields, price: "40" };

TypeScript informa de que una cadena de texto no puede usarse donde se espera un número. Sin él, "40" * 0.2 funciona por casualidad, pero "40" + 5 da "405": el tipo de error que aparece en una factura.

Un servicio que no existe.

const booking: Booking = { ...otherFields, service: "perm" };

TypeScript informa de que "perm" no es uno de los servicios permitidos. Cuando la peluquería añada permanentes, las añades al tipo, y TypeScript muestra cada lugar que necesita actualizarse: la lista de precios, el formulario, los colores del calendario.

Lo que no puede detectar. Si el formulario de reservas envía price: "40" desde el navegador al servidor, TypeScript del servidor no lo ve en tiempo de ejecución. Por eso las apps bien construidas también validan los datos entrantes, a menudo con una biblioteca de validación que comprueba la forma y los convierte en un Booking correcto.

TypeScript frente a JavaScript

Términos comunes explicados

Errores y malentendidos comunes

• «TypeScript hace que el código no tenga errores.» Detecta incoherencias en la forma de los datos, no en la lógica. Un depósito del 2 % en lugar del 20 % pasa la comprobación de tipos sin problemas.
• «Los tipos me protegen de datos incorrectos.» Los tipos desaparecen en tiempo de ejecución. Valida los datos de formularios, usuarios y APIs.
• any por todas partes. Cuando una IA se atasca, puede recurrir a any o a // @ts-ignore para silenciar los errores. Eso oculta los problemas en lugar de solucionarlos.
• Ignorar los errores de tipo porque la vista previa funciona. Algunas herramientas siguen ejecutando código con errores de tipo. Los errores siguen siendo bugs esperando a manifestarse.
• «TypeScript es más lento.» Los tipos se eliminan antes de ejecutar; el JavaScript que se ejecuta es esencialmente el mismo.
• «Es solo para equipos grandes.» Los creadores en solitario también se benefician, sobre todo cuando una IA hace la mayoría de las ediciones.

Qué pedir a tu creador con IA

• «Usa TypeScript con el modo estricto activado.»
• «Define tipos compartidos para nuestros registros principales (Customer, Booking, Invoice) y úsalos tanto en el frontend como en el backend.»
• «No uses any ni @ts-ignore para saltarte errores; soluciona el problema de fondo y dime cuál era.»
• «Valida todos los datos entrantes en el servidor, no solo con tipos.»
• «Ejecuta el verificador de tipos y corrige todos los errores antes de decirme que está terminado.»
• «Cuando renombres un campo, actualiza todos los lugares que TypeScript marque.»
• «Explícame este error de tipo en lenguaje sencillo.»

Para revisar lo que produjo la IA, consulta cómo revisar código generado por IA y cómo depurar una app creada con IA.

TypeScript en Mythex

Cuando no pides nada en concreto, Mythex empieza los proyectos nuevos con Vite + React + TypeScript + Tailwind. El editor de código incluye inteligencia de lenguaje (autocompletado, diagnósticos e ir a la definición para TypeScript y JavaScript, entre otros lenguajes), así que los errores de tipo se ven en el código, no solo en la vista previa. El editor es de solo lectura en Free y totalmente editable en Pro. Aun así, puedes pedir otra configuración en tu primer prompt; la página de la documentación sobre cómo se elige la tecnología explica cómo, y la documentación del editor de código describe lo que muestra el editor.

Preguntas