Interfaces vs Types - ¿Cuál usar y cuál es la diferencia?

Cuando trabajamos con TypeScript, una de las decisiones clave es si definir estructuras de datos con interface o type. Aunque parecen similares, tienen diferencias importantes que afectan su uso en distintos escenarios.

¿Qué son interface y type?

Interface

Una interface en TypeScript es una forma de definir la estructura de un objeto, especificando las propiedades y sus tipos. Por ejemplo:

interface SuperHero {
  name: string;
  power: string;
}

const spiderman: SuperHero = {
  name: "Peter Parker",
  power: "Spider-sense"
};

Nuestro interface define una estructura de objetos que es implementada en la variable spiderman.

Type

Un type en TypeScript permite definir un alias para un tipo de dato, que puede ser un objeto, una unión de tipos, un array, etc. Por ejemplo:

type SuperHero = {
  name: string;
  power: string;
};

const ironman: SuperHero = {
  name: "Tony Stark",
  power: "Intelligence & Money"
};

Diferencias

1. Extensibilidad (Herencia)

   Interface: Usa extends

   Puedes extender una interface para agregar más propiedades.

   // Interfaz principal
   interface Person {
     name: string;
   }
   
   // Interfaz que usa Person
   interface Employee extends Person {
     role: string;
   }
   
   // Implementación de la interfaz Employee
   const dev: Employee = {
     name: "Alice",
     role: "Frontend Developer"
   };
   

   Type: Usa & (Intersecciones)

   En type, no usamos extends, pero podemos combinar tipos con &.

   type Person = {
     name: string;
   };
   
   type Employee = Person & { role: string };
   
   const manager: Employee = {
     name: "Bob",
     role: "Project Manager"
   };
   

2. Merging (Fusión de Declaraciones)

   Las interfaces se pueden fusionar automáticamente si se declaran varias veces con el mismo nombre.

   interface Animal {
     name: string;
   }
   
   interface Animal {
     speed: number;
   }
   
   const cheetah: Animal = {
     name: "Cheetah",
     speed: 120
   };
   

   En type, esto no es posible. Si intentas declarar type Animal dos veces, TypeScript arrojará un error.

3. Usabilidad con Uniones

   Si necesitas definir un conjunto de valores posibles, type es la mejor opción.

   type Status = "success" | "error" | "loading";
   
   let apiResponse: Status = "success"; // ✅ Válido
   apiResponse = "loading"; // ✅ Válido
   apiResponse = "failed"; // ❌ Error
   

   Esto no se puede hacer con interface.

4. Definir Funciones

   Ambos pueden usarse para definir funciones, pero type permite una sintaxis más corta.

   // Usando Interface
   interface Greeter {
     (name: string): string;
   }
   
   const sayHello: Greeter = (name) => `Hello, ${name}!`;
   
   // Usando Type
   
   type Greeter = (name: string) => string;
   const greet: Greeter = (name) => `Hi, ${name}!`;
   

¿Cuándo usar cada uno?

Conclusión

Si necesitas extender estructuras o quieres aprovechar la fusión de declaraciones,interface es la mejor opción. Si necesitas definir uniones o tipos más flexibles, type es ideal. Usar la herramienta adecuada según el contexto te ayudará a escribir código más mantenible y eficiente en TypeScript.

Si este post fue de ayuda y te gusto, no olvides seguirme en mis redes y compartir. 👨‍💻🎧