El otro lado de la innovación.

Simplificado: interfaces vs. tipos en TypeScript

Si defines la estructura de un objeto o planeas usar clases, usa interface; si necesitas uniones de tipos o alias, usa type.
Simplificado: interfaces vs. tipos en TypeScript

Cuando empiezas en TypeScript, te encuentras con un dilema existencial: ¿debo usar interface o type? Tranquilo, no estás solo. Es una de esas preguntas que tienen a más de un desarrollador perdiendo el sueño y discutiendo en foros como si fuera el fin del mundo. Pero no te preocupes, intentaré explicarlo con ejemplos claros y un poco de sarcasmo.

Interfaces: un contrato que no puedes romper

Las interfaces sirven para definir la estructura de un objeto. Es como un contrato: si dices que algo tiene un nombre name y una edad age, más vale cumplirlo o TypeScript te mirará con desaprobación.

interface Person {
  name: string;
  age: number;
}

const user: Person = { name: "John", age: 25 }; // ✅ Correcto
const anotherUser: Person = { name: "Ana" }; // ❌ Error: falta la propiedad age

Tipos: un disfraz para tus datos

Los tipos son un poco más flexibles. Puedes usarlos para definir estructuras similares a las interfaces, pero también para unir tipos, hacer alias y otras cosas divertidas.

type Person = {
  name: string;
  age: number;
};

type ID = string | number;

const user: Person = { name: "Peter", age: 30 }; // ✅ Correcto
const identifier: ID = 123; // También podrías usar un string

Diferencias clave

Características Interface Type
Extensibilidad ✅ Sí, se pueden extender ⚠️ No directamente, pero se pueden combinar
Uso con clases ✅ Sí, pueden implementarse en clases ❌ No
Tipos uniones ❌ No se pueden unir directamente ✅ Sí, permite combinaciones
Redefinición ✅ Sí, puedes agregar más propiedades después ❌ No, una vez definido queda fijo

Casos útiles

Cuando construimos una API por ejemplo, necesitamos definir las estructuras de los datos que enviamos y recibimos. Pudiésemos hacer uso de ambas estructuras:

// Estructura de un usuario (interfaz)
interface User {
  id: number;
  name: string;
  email: string;
}

// Estructura de la respuesta HTTP con (tipo)
type ApiResponse<T> = {
  status: number;
  data: T;
  message?: string;
};

async function getUser(id: number): Promise<ApiResponse<User>> {
  return {
    status: 200,
    data: { id, name: "Alice", email: "[email protected]" },
  };
}

Aquí User es un contrato fijo, mientras que ApiResponse<T> es una plantilla flexible para cualquier tipo de respuesta que queramos manejar.

Estrategia para decidir qué usar

Si aún no tienes claro si usar una interfaz o u tipo, aquí hay algunas preguntas que te pueden ayudar:

  1. ¿Estoy definiendo la estructura de un objeto? → Usa interface.
  2. ¿Necesito combinar varios tipos en uno solo? → Usa type.
  3. ¿Voy a extender esta estructura en el futuro? → Usa interface.
  4. ¿Necesito definir un alias para un tipo más complejo? → Usa type.
  5. ¿Voy a usar clases que implementan esta estructura? → Usa interface.
Si sigues sin estar seguro, usa interface por defecto. Es más fácil de extender y mantener en proyectos grandes.

Conclusión

TypeScript nos da herramientas poderosas, pero como todo en la vida, hay que saber cuándo usar cada una. Si usas type cuando deberías usar interface, probablemente no pase nada catastrófico, pero si alguien ve tu código, podrías recibir miradas de desaprobación.

Así que ahora ya lo sabes: interfaces para contratos, tipos para flexibilidad.

Suscríbete a mi boletín mensual

Sin correo no deseado, sin compartir con terceros. Solo tú y yo.

Discusión de miembros