Regresar

lectura estimada

Publicado en: 2 feb 2025

Programming

Cambiar idioma:

Interface vs Type – Una guía comprensiva

Si eres nuevo en TypeScript y has visto tutoriales o leído bloques de código en internet, probablemente te hayas encontrado tanto con “types” como con “interfaces”. Aunque ambos cumplen propósitos similares, tienen características y casos de uso distintos. En este artículo espero ayudarte a entender cuándo usar cada uno.

Similitudes entre “interface” y “type”

Tanto “interface” como “type” pueden:

  1. Describir la forma de los objetos Ambos pueden definir la estructura de un objeto, incluyendo sus propiedades y sus tipos.

  2. Ser extendidos o compuestos Puedes construir sobre definiciones existentes de “interface” o “type”.

  3. Trabajar con clases Ambos pueden ser implementados por clases para forzar la comprobación de tipos.

  4. Ser usados para comprobación de tipos Ambos se eliminan durante la compilación y existen solo para la comprobación de tipos en tiempo de compilación.

Ejemplo: Definiciones equivalentes

//Using type
type TPerson = {
  id: number;
  name: string;
};
//Using interface
interface IPerson {
  id: number;
  name: string;
}

const johnny_cash: IPerson = { id: 0, name: "Johhny" };
const sturgill_simpson: TPerson = { id: 0, name: "Stu" };
//Virtualmente es lo mismo.

Nota al margen: no me gustan las convenciones de nombres para tipos o interfaces en las que la primera letra de la interfaz es “I”. Solo lo escribo así por motivos visuales.


Diferencias entre “interface” y “type”

Característicainterfacetype
Herencia✅ Puede extenderse con “extends”✅ Puede usar intersección ”&“
Fusión de declaraciones✅ Sí – múltiples declaraciones se fusionan❌ No – error si hay declaraciones duplicadas
Tipos unión e intersección❌ No✅ Sí
Primitivos, tuplas, funciones❌ No✅ Sí
Tipos mapeados y condicionales❌ No✅ Sí
Implementación en clases✅ Sí✅ Sí
Composición de tipos complejos❌ Limitado✅ Preferido

¿Limitaciones de rendimiento?

En tiempo de ejecución

En tiempo de ejecución, no hay diferencia de rendimiento entre “interface” y “type” porque los tipos de TypeScript se eliminan durante la compilación.

En tiempo de compilación

  • interface: Compila más rápido y es más eficiente en memoria en proyectos grandes.
  • type: Más flexible, pero puede hacer que la compilación sea un poco más lenta si se usan muchas intersecciones/uniones complejas.

¿Cuándo elegir uno u otro?

EscenarioRecomendaciónRazón
Declarar la forma de objetos o contratos de clasesinterfaceMás legible, extensible y optimizado por el compilador de TypeScript.
Declarar tipos unión/interseccióntypeLas interfaces no pueden expresar uniones o intersecciones.
Trabajar con primitivos, tuplas, funcionestypeSolo “type” soporta tipos que no son objetos.
Necesidad de fusión de declaracionesinterfaceSolo “interface” permite fusión de declaraciones.
Expresiones de tipos complejostypeComposición más sencilla con tipos avanzados.
Diseño de librerías/API públicasinterfaceMás fácil de extender sin cambios incompatibles.

Extender tipos vs interfaces

// Using interface extension
interface A { x: number; }
interface B extends A { y: number; }

// Using type intersection
type A = { x: number };
type B = A & { y: number };

Unión con tipos

type Status = 'success' | 'error' | 'loading';

Tipos en funciones

type Log = (message: string) => void;

Siempre toma en cuenta

Usa interface para objetos y formas de clases cuando esperas que sean extendidas. Usa type para componer múltiples tipos, uniones o cualquier cosa más compleja que un objeto sencillo.

A veces, las interfaces con tipos complejos en su interior requerirán que uses ambos:


type Status = 'success' | 'error';


interface Record {
  id: string;
  title: string;
  status: Status;
}

Conclusión

Este es uno de esos temas en los que, a medida que sigas programando, irás descubriendo cuándo usar cada uno.

Quizás te interese: