Qué es TypeScript y en qué se diferencia de JavaScript

Si llevas un tiempo aprendiendo JavaScript, en algún momento alguien te habrá dicho: "deberías aprender TypeScript". Y si buscas ofertas de trabajo en desarrollo frontend o backend con Node.js, TypeScript aparece en casi todas.

Pero, ¿qué es exactamente? ¿Es un lenguaje nuevo? ¿Reemplaza a JavaScript? ¿Vale la pena aprenderlo si recién estás empezando?

En este artículo vas a entender qué es TypeScript, en qué se diferencia de JavaScript, qué ventajas aporta y cuándo tiene sentido usarlo, con ejemplos reales en cada punto.

¿Qué es TypeScript?

TypeScript es un lenguaje de programación de código abierto desarrollado por Microsoft en 2012. Su definición más precisa es: un superconjunto tipado de JavaScript.

Eso significa dos cosas importantes:

1. Todo JavaScript válido es también TypeScript válido. Puedes tomar cualquier archivo .js, cambiarle la extensión a .ts y ya tienes TypeScript. No necesitas reescribir nada.
2. TypeScript añade características por encima de JavaScript, siendo la principal el tipado estático.

La analogía perfecta: imagina que JavaScript es un texto escrito a mano, flexible pero sin corrector ortográfico. TypeScript es el mismo texto procesado con un corrector avanzado que subraya los errores antes de que los publiques, detecta si usas una palabra que no existe y te sugiere la correcta mientras escribes.

Un detalle fundamental: TypeScript no se ejecuta directamente en el navegador. Primero se compila (transforma) a JavaScript estándar, que es lo que el navegador o Node.js finalmente interpreta. El compilador de TypeScript hace esa conversión automáticamente.

Tu código TypeScript (.ts)
        ↓ compilación (tsc)
JavaScript estándar (.js)
        ↓ ejecución
Navegador / Node.js

La diferencia fundamental: tipado dinámico vs tipado estático

Para entender TypeScript, necesitas entender primero cómo funciona el tipado en JavaScript.

JavaScript: tipado dinámico

En JavaScript, las variables no tienen un tipo fijo. Pueden cambiar de tipo en cualquier momento y el lenguaje no se queja:

// JavaScript — tipado dinámico
let mensaje = "Hola";     // string
mensaje = 42;             // ahora es number... y JavaScript lo permite
mensaje = true;           // ahora es boolean... sigue sin quejarse
mensaje = [1, 2, 3];      // ahora es array... sin errores

// Esto también funciona (aunque sea un error de lógica):
function sumar(a, b) {
  return a + b;
}

sumar(5, 10);       // 15 ✅
sumar("5", 10);     // "510" ← concatena en lugar de sumar... sin error
sumar();            // NaN ← no lanza error hasta ejecutar

Esa flexibilidad es genial para scripts rápidos y proyectos pequeños. Pero en proyectos grandes con muchos desarrolladores, los errores de tipo son una fuente constante de bugs difíciles de rastrear que solo aparecen en producción.

TypeScript: tipado estático

TypeScript te permite (y a veces obliga) a declarar el tipo de cada variable, parámetro y valor de retorno. El compilador verifica que los tipos sean correctos antes de ejecutar el código:

// TypeScript — tipado estático
let mensaje: string = "Hola";
mensaje = 42;      // ❌ Error en compilación: Type 'number' is not assignable to type 'string'
mensaje = "Adiós"; // ✅ Correcto

// Los parámetros tienen tipos definidos
function sumar(a: number, b: number): number {
  return a + b;
}

sumar(5, 10);      // 15 ✅
sumar("5", 10);    // ❌ Error: Argument of type 'string' is not assignable to type 'number'
sumar();           // ❌ Error: Expected 2 arguments, but got 0

El compilador detecta todos esos errores mientras escribes el código, antes de ejecutarlo. No en producción. No cuando un usuario reporta un bug. Ahí mismo, en tu editor.

Las principales diferencias entre TypeScript y JavaScript

Características clave de TypeScript con ejemplos

1. Tipos básicos

// Tipos primitivos
let nombre: string    = "Ana";
let edad: number      = 25;
let activo: boolean   = true;
let nada: null        = null;
let indefinido: undefined = undefined;

// Arrays tipados
let numeros: number[] = [1, 2, 3, 4, 5];
let nombres: string[] = ["Ana", "Luis", "María"];

// Tuplas — arrays con tipos fijos en posiciones específicas
let coordenada: [number, number] = [40.416775, -3.703790];
let entrada: [string, number]    = ["Admin", 1];

// Any — escapa del tipado (usar con moderación)
let cualquierCosa: any = "texto";
cualquierCosa = 42;    // permitido con 'any'
2. Tipos en funciones
// Parámetros y valor de retorno tipados
function saludar(nombre: string, veces: number = 1): string {
  return `Hola, ${nombre}! `.repeat(veces).trim();
}

console.log(saludar("Ana"));      // "Hola, Ana!"
console.log(saludar("Luis", 3));  // "Hola, Luis! Hola, Luis! Hola, Luis!"

// Función que no retorna nada: void
function mostrarMensaje(mensaje: string): void {
  console.log(mensaje);
}

// Parámetros opcionales con ?
function presentar(nombre: string, ciudad?: string): string {
  if (ciudad) {
    return `${nombre} de ${ciudad}`;
  }
  return nombre;
}

presentar("Ana");              // "Ana"
presentar("Luis", "Bogotá");   // "Luis de Bogotá"

3. Interfaces — definir la forma de los objetos

Las interfaces son una de las características más poderosas de TypeScript. Permiten definir la "forma" que debe tener un objeto: qué propiedades tiene, de qué tipo son y cuáles son opcionales.

// Definir una interfaz
interface Usuario {
  id: number;
  nombre: string;
  email: string;
  edad?: number;       // propiedad opcional (el ? la hace opcional)
  readonly creado: Date; // readonly: no se puede modificar después de crearse
}

// Usar la interfaz
const usuario1: Usuario = {
  id: 1,
  nombre: "Ana García",
  email: "ana@ejemplo.com",
  creado: new Date()
};

const usuario2: Usuario = {
  id: 2,
  nombre: "Luis Pérez",
  email: "luis@ejemplo.com",
  edad: 30,
  creado: new Date()
};

// TypeScript verifica que el objeto cumple la interfaz:
const usuarioMal: Usuario = {
  id: 3,
  nombre: "Carlos"
  // ❌ Error: falta la propiedad 'email' que es obligatoria
};

// Las interfaces también definen contratos para funciones
interface Repositorio {
  obtenerTodos(): Usuario[];
  obtenerPorId(id: number): Usuario | null;
  crear(usuario: Omit<Usuario, 'id' | 'creado'>): Usuario;
  eliminar(id: number): boolean;
}

4. Type Aliases — tipos personalizados

// Crear un tipo personalizado
type ID = number | string;   // puede ser número o string

type EstadoPedido = "pendiente" | "procesando" | "enviado" | "entregado" | "cancelado";

// Usar el tipo
let pedidoId: ID = 123;
pedidoId = "ABC-456";   // también válido

let estado: EstadoPedido = "procesando";
estado = "entregado";
estado = "perdido";  // ❌ Error: no está en los valores permitidos

5. Enums — conjuntos de valores constantes

enum Direccion {
  Norte = "NORTE",
  Sur   = "SUR",
  Este  = "ESTE",
  Oeste = "OESTE"
}

function mover(direccion: Direccion): string {
  return `Moviéndose hacia el ${direccion}`;
}

mover(Direccion.Norte);   // "Moviéndose hacia el NORTE" ✅
mover("NORTE");           // ❌ Error: debe ser de tipo Direccion

6. Genéricos — código reutilizable con tipos variables

// Sin genéricos: necesitas una función por cada tipo
function primerElementoNumero(arr: number[]): number { return arr[0]; }
function primerElementoString(arr: string[]): string { return arr[0]; }

// Con genéricos: una sola función para cualquier tipo
function primerElemento<T>(arr: T[]): T {
  return arr[0];
}

primerElemento([1, 2, 3]);             // retorna number
primerElemento(["a", "b", "c"]);       // retorna string
primerElemento([true, false]);         // retorna boolean

// Genéricos en interfaces
interface Respuesta<T> {
  datos: T;
  error: string | null;
  timestamp: Date;
}

const respuestaUsuario: Respuesta<Usuario> = {
  datos: usuario1,
  error: null,
  timestamp: new Date()
};

const respuestaLista: Respuesta<Usuario[]> = {
  datos: [usuario1, usuario2],
  error: null,
  timestamp: new Date()
};

7. Clases con modificadores de acceso

class CuentaBancaria {
  private saldo: number;       // solo accesible desde dentro de la clase
  public titular: string;      // accesible desde cualquier lugar
  protected tipo: string;      // accesible desde la clase y subclases
  readonly numero: string;     // solo lectura

  constructor(titular: string, saldoInicial: number) {
    this.titular  = titular;
    this.saldo    = saldoInicial;
    this.tipo     = "estándar";
    this.numero   = Math.random().toString(36).substring(2);
  }

  depositar(monto: number): void {
    if (monto <= 0) throw new Error("El monto debe ser positivo");
    this.saldo += monto;
  }

  retirar(monto: number): void {
    if (monto > this.saldo) throw new Error("Saldo insuficiente");
    this.saldo -= monto;
  }

  obtenerSaldo(): number {
    return this.saldo;
  }
}

const cuenta = new CuentaBancaria("Ana García", 1000);
cuenta.depositar(500);
console.log(cuenta.obtenerSaldo());  // 1500
console.log(cuenta.saldo);           // ❌ Error: 'saldo' es private

¿Cómo se instala y usa TypeScript?

# Instalar TypeScript globalmente
npm install -g typescript

# Verificar la instalación
tsc --version

# Crear un proyecto TypeScript
mkdir mi-proyecto-ts
cd mi-proyecto-ts
npm init -y

# Instalar TypeScript como dependencia de desarrollo
npm install --save-dev typescript

# Crear el archivo de configuración
npx tsc --init

Esto crea un archivo tsconfig.json con toda la configuración del compilador. El más básico:

{
  "compilerOptions": {
    "target": "ES2022",       // versión de JS a la que se compila
    "module": "commonjs",     // sistema de módulos
    "strict": true,           // activa todas las verificaciones estrictas
    "outDir": "./dist",       // carpeta donde se guardan los .js compilados
    "rootDir": "./src"        // carpeta donde están tus archivos .ts
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

Crear un archivo src/index.ts y compilar:

# Compilar una vez
npx tsc

# Compilar en modo observación (recompila al guardar)
npx tsc --watch

TypeScript en el mundo real: dónde se usa

En 2026, TypeScript superó a JavaScript como el lenguaje número 1 en GitHub con más de 2.6 millones de contribuidores mensuales. Su adopción en el ecosistema frontend y backend es masiva:

Frameworks que usan TypeScript

• 🔴 Angular — escrito completamente en TypeScript, es obligatorio usarlo
• ⚛️ React — soporte de primera clase, usado con @types/react
• 💚 Vue 3 — reescrito en TypeScript con soporte nativo completo
• 🟣 NestJS — el framework backend de Node.js, requiere TypeScript
• ⚡ Next.js — soporte nativo para TypeScript desde el inicio
• 🦕 Deno — el runtime de JS/TS que ejecuta TypeScript nativamente

Empresas que lo usan

Microsoft (lógico, lo crearon), Slack, Airbnb, Lyft, Asana, Bloomberg y prácticamente cualquier empresa con un equipo de desarrollo frontend de tamaño medio o grande.

Ventajas de TypeScript

✅ Detecta errores antes de ejecutar

El 94% de los errores relacionados con tipos en aplicaciones JavaScript se habrían detectado en compilación con TypeScript. Un bug que en JS aparece en producción, en TS aparece en tu editor mientras escribes.

✅ Autocompletado inteligente en el editor

Cuando TypeScript conoce el tipo de un objeto, VS Code puede sugerirte exactamente qué propiedades y métodos tiene. Ya no necesitas recordar si era user.firstName o user.first_name: el editor te lo dice.

✅ Refactorización segura

Si renombras una función o cambias la firma de un método, TypeScript te dice exactamente en qué partes del código debes hacer cambios. En proyectos grandes, esto es invaluable.

✅ Código como documentación

Los tipos son documentación ejecutable. Cuando ves function crear(usuario: Usuario): Promise<Usuario>, sabes exactamente qué recibe y qué devuelve sin leer comentarios ni documentación externa.

✅ Mejor colaboración en equipos

Los contratos entre módulos (interfaces) son explícitos. El equipo de frontend sabe exactamente qué datos espera de la API. El equipo de backend sabe qué formato debe devolver. Menos reuniones, menos bugs de integración.

✅ Superconjunto de JavaScript

Todo tu conocimiento de JavaScript sigue siendo válido. No estás aprendiendo un lenguaje nuevo desde cero: estás añadiendo una capa encima de lo que ya sabes.

Desventajas de TypeScript

❌ Requiere compilación

No puedes abrir un archivo .ts en el navegador directamente. Necesitas el paso de compilación, lo que añade complejidad al flujo de trabajo.

❌ Más código para escribir

Declarar tipos, interfaces y genéricos añade líneas de código. En proyectos pequeños, puede sentirse como burocracia innecesaria.

❌ Curva de aprendizaje inicial

Los genéricos, los tipos condicionales, los tipos mapeados y los decoradores pueden ser conceptos difíciles al principio. La semana inicial puede ser frustrante.

❌ No siempre necesario

Para scripts de automatización, prototipos rápidos o proyectos muy pequeños, JavaScript es perfectamente válido y más rápido de escribir.

¿Cuándo usar TypeScript y cuándo JavaScript?

Usa TypeScript cuando:

• ✅ Estás construyendo algo que un equipo va a mantener
• ✅ El proyecto tiene más de 1,000 líneas de código
• ✅ Trabajas con APIs y necesitas modelar las respuestas
• ✅ Usas Angular (es obligatorio), React profesionalmente o NestJS
• ✅ Quieres mejorar tus posibilidades en el mercado laboral
• ✅ Seguirás trabajando en el proyecto dentro de 6 meses

Usa JavaScript cuando:

• ✅ Estás aprendiendo programación por primera vez
• ✅ Es un script rápido o un prototipo desechable
• ✅ El proyecto es pequeño y personal
• ✅ Necesitas algo funcionando en los próximos 2 horas
• ✅ Estás experimentando con una idea nueva

💡 La regla práctica de 2026: si lo van a ver otros ojos además de los tuyos o si va a producción, TypeScript. Si es para ti y para hoy, JavaScript está bien.

¿Cómo pasar de JavaScript a TypeScript?

La buena noticia es que la transición es gradual. TypeScript tiene un modo que permite archivos JavaScript dentro de un proyecto TypeScript, por lo que puedes migrar de forma progresiva:

1. Semana 1: Aprende los tipos básicos — string, number, boolean, arrays, funciones tipadas
2. Semana 2: Aprende interfaces y type aliases. Es donde TypeScript se vuelve realmente útil
3. Semana 3: Practica con un proyecto real. Convierte un proyecto JS pequeño a TS
4. Semana 4+: Aprende genéricos, enums, clases con modificadores, tipos de utilidad

// Migración gradual: puedes empezar así en JS existente
// @ts-check   ← añade verificación básica sin compilador TypeScript
// @ts-ignore  ← ignora el error en una línea específica si es necesario

// Y poco a poco añadir anotaciones de tipo donde más importa

Comparativa rápida: el mismo código en JS y TS

// ============================================
// JAVASCRIPT — función para buscar un usuario
// ============================================

function buscarUsuario(id) {
  // ¿id es un number? ¿un string? No se sabe sin leer la implementación
  // ¿Qué devuelve? ¿Un objeto? ¿null? ¿undefined?
  const usuario = baseDatos.find(u => u.id === id);
  return usuario;
}

// Llamada — no hay garantías de qué pasa con los datos
const resultado = buscarUsuario(42);
console.log(resultado.nombre.toUpperCase()); // puede explotar si no existe

// ============================================
// TYPESCRIPT — la misma función
// ============================================

interface Usuario {
  id: number;
  nombre: string;
  email: string;
}

function buscarUsuario(id: number): Usuario | null {
  // TypeScript sabe exactamente qué recibe y qué devuelve
  const usuario = baseDatos.find(u => u.id === id);
  return usuario ?? null;
}

// Llamada — TypeScript te obliga a manejar el caso null
const resultado = buscarUsuario(42);

if (resultado !== null) {
  console.log(resultado.nombre.toUpperCase()); // seguro ✅
}

// Sin verificación, el editor avisa:
console.log(resultado.nombre); // ⚠️ Posible null — el editor lo subraya

Resumen: lo que aprendiste hoy

• ✅ TypeScript es un superconjunto de JavaScript desarrollado por Microsoft
• ✅ La diferencia principal: tipado estático (TS) vs tipado dinámico (JS)
• ✅ TypeScript se compila a JavaScript — no se ejecuta directamente en el navegador
• ✅ Todo JavaScript válido es TypeScript válido (compatibilidad total)
• ✅ Sus características clave: tipos, interfaces, enums, genéricos y modificadores de acceso
• ✅ Detecta errores mientras escribes, no cuando el usuario los encuentra
• ✅ En 2026 es el estándar en equipos profesionales y proyectos grandes
• ✅ Angular lo requiere; React, Vue y NestJS lo recomiendan fuertemente
• ✅ Aprende JavaScript primero, luego TypeScript como siguiente paso natural
• ✅ Para proyectos pequeños y scripts rápidos, JavaScript sigue siendo válido

🧪 ¿Ya tienes los fundamentos de JavaScript bien sólidos?

TypeScript requiere que conozcas bien JavaScript antes de añadirle la capa de tipos. Si todavía tienes dudas con funciones, callbacks, promesas o el DOM, estos son los pasos a seguir antes de saltar a TypeScript.

👉 Test: Fundamentos de JavaScript 👉 Test: HTML y CSS 

¿Ya usabas TypeScript o lo conocías solo de nombre? ¿Cuál fue el concepto que más te costó entender: los genéricos, las interfaces o el proceso de compilación? Cuéntanos en los comentarios 👇 — respondemos todos. 🚀