Interface vs Type

Interface

• Ideal para definir contratos para la estructura de objetos, especialmente en programación orientada a objetos}
• Está mas limitado a estructura de objectos
• Permite fusionar declaraciones
• Se puede extender fácilmente con extends
• Para trabajar con clases (implements)

Type

• type soporta uniones, intersecciones y tipos más complejos
• Usar type si se necesita uniones, tuplas o funciones más compactas
• Para extenderlo, type usa intersección con &
• type no permite redefiniciones

Ejemplos

Definición de un objecto

• Ambos se usan igual para objetos

// Con interface 
interface Persona { 
  nombre: string; 
  edad: number; 
} 

const persona1: Persona = { 
  nombre: "Juan", 
  edad: 30, 
};

// Con type 
type Persona = { 
  nombre: string; 
  edad: number; 
};

const persona2: PersonaType = { 
  nombre: "Ana", 
  edad: 25, 
};

Usando interface en clases

• Solo las interfaces pueden ser implementadas en clases con implements

// Interface
interface Usuario {
  nombre: string;
  iniciarSesion(): void;
}

// Class
class Cliente implements Usuario {
  nombre: string;

  constructor(nombre: string) {
    this.nombre = nombre;
  }

  iniciarSesion() {
    console.log(`${this.nombre} inició sesión`);
  }
}

// New 
const usuario1 = new Cliente("Carlos");
usuario1.iniciarSesion(); // Carlos inició sesión

Extensión

• Ambos pueden extender, pero interface usa extends y type usa &

// Con interface
interface Persona {
  nombre: string;
}

interface Empleado extends Persona {
  salario: number;
}

const empleado1: Empleado = {
  nombre: "Lucas",
  salario: 2000,
};

// Con type (usando intersección) 
type PersonaType = {
  nombre: string;
};

type EmpleadoType = PersonaType & { salario: number };

const empleado2: EmpleadoType = {
  nombre: "Elena",
  salario: 3000,
};

Fusión de tipos

• Las interfaces permiten declarar varias veces el mismo nombre y se combinan automáticamente:

interface Usuario { 
  nombre: string; 
} 

interface Usuario { 
  edad: number; 
} 

// Se fusiona automáticamente en: 
// { nombre: string; edad: number }

• Con type esto no es posible

type Usuario = { nombre: string };
type Usuario = { edad: number }; // ❌ Error: Duplicate identifier

Funciones

• Ambos pueden definir funciones pero type lo hace de forma más compacta
• Se usan igual, pero type es más compacto

// Con interface
interface Suma {
  (a: number, b: number): number;
}

const sumar: Suma = (x, y) => x + y;
console.log(sumar(5, 3)); // 8

// Con type
type Multiplicar = (a: number, b: number) => number;

const multiplicar: Multiplicar = (x, y) => x * y;
console.log(multiplicar(5, 3)); // 15

Uniones y Tuplas (solo con type)

• Solo type permite uniones (|)
• Las tuplas solo se pueden definir con type

// Uniones
type Status = "active" | "inactive";
const userStats: Status = "active"

type Id = string | number; 
const userId1: Id = 123; 
const userId2: Id = "abc123";

// Tuplas
type Coordenadas = [number, number]; 
const punto: Coordenadas = [10, 20];