Lección 85 — Type vs Interface

🧠 Concepto

Una de las preguntas más frecuentes en TypeScript es: ¿cuándo usar type y cuándo usar interface? Ambas pueden definir la forma de un objeto, pero tienen diferencias importantes.

Diferencias clave

1. Extensión

Interface usa extends, type usa & (intersección):

interface Animal { nombre: string }
interface Perro extends Animal { raza: string }

type AnimalT = { nombre: string };
type PerroT = AnimalT & { raza: string };

2. Declaration merging

Las interfaces se pueden reabrir (declaration merging), los types no:

interface Usuario { nombre: string }
interface Usuario { edad: number }  // ✅ se fusiona

type UsuarioT = { nombre: string };
type UsuarioT = { edad: number };  // ❌ Error: nombre duplicado

3. Capacidades exclusivas de type

Los type pueden representar cosas que interface no puede:

// Uniones
type Estado = 'activo' | 'inactivo';

// Tipos primitivos
type ID = string | number;

// Tuplas
type Par = [string, number];

// Tipos condicionales
type EsString<T> = T extends string ? 'sí' : 'no';

// Mapped types
type Opcional<T> = { [K in keyof T]?: T[K] };

4. Capacidades exclusivas de interface

Las interface pueden extender clases y son más performantes en la comprobación de tipos en objetos complejos:

class Controlador { estado: boolean = false }
interface ControladorExt extends Controlador {
  nuevoMetodo(): void;
}

Recomendación general

Situación	Usar
API pública, objetos, clases	interface
Uniones, intersecciones, tuplas	type
Declaration merging necesario	interface
Tipos primitivos con alias	type
Props de componentes (React)	Cualquiera, pero type es común
Librerías/frameworks	interface (por extensibilidad)

💻 Ejemplo

// ✅ Cuándo usar interface
interface RespuestaHTTP {
  status: number;
  mensaje: string;
}

// Se puede extender después
interface RespuestaHTTP {
  datos?: unknown;
}

// ✅ Cuándo usar type
type StatusCode = 200 | 404 | 500 | 302;
type Callback = (datos: unknown) => void;
type Resultado<T> = { exito: boolean; datos: T };

// ❌ Mezcla que causa confusión — elige uno
type User = { nombre: string };
// interface User { email: string } // ❌ Error si hay type previo

📝 Ejercicio

Crea un programa que demuestre las diferencias:

1. Define un type Coordenada como tupla [number, number].
2. Define una interface Punto con x: number y y: number.
3. Intenta extender ambos (usando extends para interface y & para type).
4. Intenta reabrir ambos (declaration merging).
5. Crea un union type Figura = Circulo | Rectangulo usando type.

Anota cuáles funcionan y cuáles fallan.

⚠️ Nota

TypeScript 5+ ha reducido las diferencias. Hoy en día ambos son casi intercambiables para objetos simples. La elección es más sobre convención que sobre capacidad técnica.

🎯 Tip

Consistencia sobre perfección. En un proyecto, elige una convención y mantenla. Muchos equipos usan interface para objetos y type para el resto. Otros usan type para todo. Ambas posturas son válidas.