TypeScript: añadiendo un cinturón de seguridad a JavaScript

Al finalizar este tema

Podrás explicar por qué es necesario TypeScript y conocerás la sintaxis básica de la anotación de tipos.

¿Por qué usarlo si JavaScript funciona bien por sí solo?

Observa este código:

function add(a, b) {
  return a + b;
}

add(1, 2);       // 3 — resultado esperado
add("1", 2);     // "12" — resultado no esperado

"1" + 2 se convierte en "12" debido a una característica de JavaScript. Aunque se introduzca una cadena donde debería haber un número, no se produce un error y el código simplemente se ejecuta. Devuelve valores incorrectos de forma silenciosa.

En proyectos de dos personas, esto puede ser aceptable porque cada uno tiene presente que "aquí solo deben introducirse números". Pero, ¿qué ocurre cuando el equipo crece a 10 desarrolladores y el código alcanza las 100.000 líneas? Alguien inevitablemente introducirá una cadena, y el error solo se detectará cuando el servicio falle.

¿Qué hace TypeScript?

TypeScript consiste en especificar tipos para variables y funciones. De este modo, antes de ejecutar el código, indica con una línea roja los lugares donde los tipos no coinciden con lo especificado.

function add(a: number, b: number): number {
  return a + b;
}

add(1, 2);       // ✅ OK
add("1", 2);     // ❌ línea roja — '"1" no es number'

Solo por haber escrito : number, detecté el error incluso antes de ejecutarlo. Es como un cinturón de seguridad: puedes conducir sin él, pero en caso de accidente, la diferencia es entre la vida y la muerte.

Tipos más utilizados

// tipo básico
let name: string = "Alex";
let age: number = 30;
let isAdmin: boolean = false;

// arreglo
let scores: number[] = [90, 85, 77];

// objeto
let user: { name: string; age: number } = {
  name: "Alex",
  age: 30,
};

Hasta aquí, todo es intuitivo. Hay otros dos tipos que demuestran su utilidad al usarse con frecuencia:

Union Type — "esto o aquello":

let status: "success" | "error" | "loading" = "loading";
status = "done";  // ❌ — no es uno de los tres valores definidos

Tupla — "Arreglo con orden y tipos definidos":

let point: [number, number] = [10, 20];    // ✅
let wrong: [number, number] = [10, "20"];  // ❌

Proceso de ejecución

El navegador no puede ejecutar TypeScript directamente. El compilador de TypeScript (tsc) convierte los archivos .ts en archivos .js, y el navegador ejecuta ese .js.

Escribir código (.ts)  →  compilar con tsc  →  JavaScript (.js)  →  ejecutar en navegador
                    ↑
              Aquí se detectan los errores de tipo
              de antemano

La información de tipos se elimina por completo durante el proceso de compilación. El código que se ejecuta es, en última instancia, JavaScript estándar. No afecta al rendimiento.

Crea un archivo tsconfig.json en la raíz del proyecto para configurar las opciones de compilación. Al activar el modo strict, la verificación de tipos se vuelve más rigurosa.

Entonces, ¿cuándo usarlo?

Cuando creas un script de 100 líneas por tu cuenta, JavaScript es suficiente. Pero en estas situaciones, TypeScript es prácticamente indispensable:

• Proyectos en los que trabajan varias personas
• Código que volverás a revisar dentro de seis meses
• Proyectos con estructuras de respuesta de API complejas

La mayoría de las ofertas de empleo actuales de frontend requieren TypeScript, y React, Vue y Angular admiten TypeScript de forma nativa. La etapa de cuestionarse "si debo usarlo o no" ya ha pasado.

El efecto secundario: un editor más inteligente

Al usar TypeScript, el editor (como VS Code) ofrece un autocompletado preciso.

Si escribes user. en JavaScript, el editor no sabe qué propiedades existen porque no conoce el contenido de la variable. Sin embargo, si defines user: { name: string; age: number } con TypeScript, en el momento en que escribas user., name y age aparecerán en la lista de autocompletado.

Esto marca una gran diferencia a medida que el proyecto crece. No importa si no recuerdas el nombre de una función o qué propiedades tiene un objeto; el editor te lo muestra todo. La información de tipos se convierte en documentación viva.

Lo esencial

TypeScript es como añadir un cinturón de seguridad de tipos a JavaScript. Detecta errores antes de la ejecución y hace que el autocompletado del editor sea más inteligente. Dado que la información de tipos se elimina en tiempo de ejecución, no hay diferencia de rendimiento.