Contenidos
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:
-
Describir la forma de los objetos Ambos pueden definir la estructura de un objeto, incluyendo sus propiedades y sus tipos.
-
Ser extendidos o compuestos Puedes construir sobre definiciones existentes de “interface” o “type”.
-
Trabajar con clases Ambos pueden ser implementados por clases para forzar la comprobación de tipos.
-
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ística | interface | type |
---|---|---|
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?
Escenario | Recomendación | Razón |
---|---|---|
Declarar la forma de objetos o contratos de clases | interface | Más legible, extensible y optimizado por el compilador de TypeScript. |
Declarar tipos unión/intersección | type | Las interfaces no pueden expresar uniones o intersecciones. |
Trabajar con primitivos, tuplas, funciones | type | Solo “type” soporta tipos que no son objetos. |
Necesidad de fusión de declaraciones | interface | Solo “interface” permite fusión de declaraciones. |
Expresiones de tipos complejos | type | Composición más sencilla con tipos avanzados. |
Diseño de librerías/API públicas | interface | Má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.