¿Cómo usar interfaces y tipos personalizados en TypeScript?

Una interfaz en TypeScript es una estructura que define qué propiedades y tipos debe tener un objeto.

En la lección anterior aprendiste los tipos básicos: string, number, boolean y array. Ahora vas a combinarlos para describir objetos completos con precisión.

Qué es una interfaz y para qué sirve

Cuando tu programa maneja objetos —un producto, un empleado, una orden de compra— necesitas garantizar que cada objeto tenga exactamente las propiedades que esperas.

Sin una interfaz, TypeScript no puede verificar la estructura de un objeto. Con una interfaz, el compilador te avisa si te falta una propiedad o si pusiste el tipo equivocado.

Beneficio clave: detectas errores antes de ejecutar el programa, no después de que falla en producción.

Sintaxis de una interfaz

La palabra clave es interface. La estructura general es:

interface NombreInterfaz {
  propiedad1: Tipo;
  propiedad2: Tipo;
  propiedadOpcional?: Tipo;
}

Observa los detalles:

• El nombre de la interfaz empieza con mayúscula por convención.
• Cada propiedad termina con punto y coma.
• El signo ? marca una propiedad como opcional.

Ejemplos prácticos

Ejemplo 1 — Producto de Mercado Libre

Supón que construyes una tienda en línea similar a Mercado Libre. Cada producto tiene un identificador, un nombre, un precio y una disponibilidad.

interface Producto {
  id: number;
  nombre: string;
  precio: number;
  disponible: boolean;
}

const teclado: Producto = {
  id: 1021,
  nombre: "Teclado inalámbrico",
  precio: 850,
  disponible: true
};

console.log(`${teclado.nombre} cuesta $${teclado.precio}`);
// Resultado: Teclado inalámbrico cuesta $850

Si intentas agregar una propiedad que no existe en la interfaz, TypeScript lanza un error de inmediato. Eso evita datos sucios en tu sistema.

Ejemplo 2 — Empleado de FEMSA con propiedad opcional

El departamento de Recursos Humanos de FEMSA registra empleados. Algunos tienen número de extensión telefónica y otros no. Usa ? para marcar esa propiedad como opcional.

interface Empleado {
  id: number;
  nombre: string;
  puesto: string;
  salario: number;
  extension?: number;
}

const empleado1: Empleado = {
  id: 4501,
  nombre: "Karla Mendoza",
  puesto: "Analista de Datos",
  salario: 22000
};

const empleado2: Empleado = {
  id: 4502,
  nombre: "Roberto Solis",
  puesto: "Gerente Regional",
  salario: 30000,
  extension: 3812
};

console.log(`${empleado1.nombre} gana $${empleado1.salario} al mes.`);
// Resultado: Karla Mendoza gana $22,000 al mes.

Ambos objetos son válidos. empleado1 no incluye extension y TypeScript no se queja porque esa propiedad es opcional.

Ejemplo 3 — Orden de compra de Liverpool con interfaz anidada

En sistemas reales, un objeto contiene otros objetos. Una orden de compra de Liverpool tiene datos del cliente y datos del producto.

interface Cliente {
  nombre: string;
  correo: string;
}

interface OrdenDeCompra {
  folio: string;
  cliente: Cliente;
  total: number;
  pagado: boolean;
}

const orden: OrdenDeCompra = {
  folio: "LIV-20240901",
  cliente: {
    nombre: "Ana Torres",
    correo: "ana.torres@correo.com"
  },
  total: 4599,
  pagado: false
};

console.log(`Folio: ${orden.folio} | Cliente: ${orden.cliente.nombre} | Total: $${orden.total}`);
// Resultado: Folio: LIV-20240901 | Cliente: Ana Torres | Total: $4,599

Usar interfaces anidadas mantiene tu código organizado y legible.

Tipos personalizados con type

Además de interface, TypeScript ofrece la palabra clave type para crear tipos personalizados. La sintaxis es similar pero más flexible.

type NombreTipo = {
  propiedad1: Tipo;
  propiedad2: Tipo;
};

También puedes crear tipos de unión con type. Un tipo de unión acepta más de un tipo posible.

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

let estado: EstadoPedido = "enviado";
estado = "entregado";   // válido
estado = "perdido";     // ERROR: "perdido" no está en el tipo

Este patrón es muy útil para representar catálogos fijos, como los estados de un pedido en una plataforma de logística de Bimbo.

Diferencia entre interface y type

Ambas herramientas sirven para describir estructuras. Sin embargo, hay diferencias importantes que debes conocer.

Regla práctica: usa interface para describir la forma de objetos y clases. Usa type para uniones, alias o combinaciones complejas.

Extender interfaces con extends

Puedes crear una interfaz nueva basada en otra existente. Esto evita repetir propiedades.

interface PersonaBase {
  nombre: string;
  edad: number;
}

interface Vendedor extends PersonaBase {
  numeroDeVentas: number;
  comision: number;
}

const vendedor: Vendedor = {
  nombre: "Luis Herrera",
  edad: 34,
  numeroDeVentas: 48,
  comision: 1500
};

console.log(`${vendedor.nombre} tiene ${vendedor.numeroDeVentas} ventas y gana $${vendedor.comision} de comisión.`);
// Resultado: Luis Herrera tiene 48 ventas y gana $1,500 de comisión.

Vendedor hereda nombre y edad de PersonaBase. Solo agregas las propiedades nuevas.

Errores comunes

Error 1 — Olvidar una propiedad obligatoria

interface Producto {
  id: number;
  nombre: string;
  precio: number;
}

// ❌ ERROR: falta la propiedad "precio"
const mochila: Producto = {
  id: 55,
  nombre: "Mochila escolar"
};

TypeScript te mostrará: Property 'precio' is missing in type. Agrega todas las propiedades obligatorias para corregirlo.

Error 2 — Asignar un tipo incorrecto a una propiedad

interface Empleado {
  nombre: string;
  salario: number;
}

// ❌ ERROR: salario debe ser number, no string
const emp: Empleado = {
  nombre: "Sofía",
  salario: "veinte mil"
};

Nunca pongas valores de texto donde se espera un número. Este error es muy común al leer datos de formularios HTML.

Error 3 — Agregar propiedades que no están en la interfaz

interface Cliente {
  nombre: string;
  correo: string;
}

// ❌ ERROR: "telefono" no existe en la interfaz Cliente
const cliente: Cliente = {
  nombre: "Pedro",
  correo: "pedro@mail.com",
  telefono: "5512345678"
};

Si necesitas telefono, agrégala a la interfaz (como opcional con ? si no siempre está disponible).

Error 4 — Confundir type e interface para uniones

// ❌ Esto NO funciona con interface
interface Color = "rojo" | "azul" | "verde"; // Error de sintaxis

// ✅ Usa type para uniones
type Color = "rojo" | "azul" | "verde";

Las interfaces no soportan el operador de unión |. Para ese caso, usa type siempre.

Cuándo usar cada uno en proyectos reales

En proyectos medianos o grandes —como un sistema de inventario para una tienda de Bimbo o un portal de empleados de FEMSA— la elección entre interface y type sigue esta guía:

• API responses: usa interface. Describes exactamente qué llega del servidor.
• Estados de un proceso: usa type con uniones. Por ejemplo, "activo" | "inactivo" | "suspendido".
• Modelos de datos (productos, empleados, pedidos): usa interface.
• Combinaciones de dos tipos: usa type con intersección (&).

No mezcles los dos sin una razón clara. La consistencia hace que tu equipo entienda el código más rápido.

Puntos clave

• interface define la estructura exacta de un objeto: propiedades y sus tipos.
• El signo ? convierte una propiedad en opcional dentro de la interfaz.
• type es más flexible: soporta uniones (|) e intersecciones (&).
• Usa extends para heredar propiedades de una interfaz existente y evitar repetición.
• El compilador de TypeScript detecta propiedades faltantes, tipos incorrectos y propiedades no declaradas en tiempo de desarrollo.