August 22, 2024

Diferencia entre interfaz y type en TS

TypeScript
JavaScript

Antes de meternos al barro con la explicación, creo que es importante tener primero los conceptos, por eso mismo vamos a ver

Que es cada una?

Interface (Interfaz)

¿Qué es?: Piensa en una interfaz como un "contrato". Este contrato dice cómo debe ser un objeto. Es como un molde que dice qué propiedades y tipos debe tener un objeto.

¿Cuándo usarla?: Usa una interfaz cuando quieres asegurarte de que los objetos que creas o las clases que implementas siguen un conjunto específico de reglas (propiedades y tipos).

Ejemplo:

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

// Esto es correcto
const dog: Animal = {
  name: "Rex",
  age: 5
};

// Esto es incorrecto (falta la propiedad `age`)
const cat: Animal = {
  name: "Whiskers"
};

Type (Tipo)

¿Qué es?: Un type es una forma flexible de definir un alias para cualquier tipo de dato, como un objeto, una unión de tipos, una función, etc. Es como ponerle un nombre a cualquier tipo que puedas imaginar.

¿Cuándo usarlo?: Usa un type cuando necesites algo más que solo un "molde" de objeto. Por ejemplo, si necesitas definir un tipo que puede ser varias cosas (unión de tipos) o combinar varios tipos (intersección de tipos).

Ejemplo:

type StringOrNumber = string | number;

// Correcto: es un string
let a: StringOrNumber = "hello";

// Correcto: es un número
let b: StringOrNumber = 42;

// Incorrecto: no es ni string ni número
let c: StringOrNumber = true;

Diferencias Básicas:

Interfaz: Es como un molde que define cómo debe verse un objeto. Úsala cuando necesitas definir objetos o cuando quieres extender otros moldes (interfaces).

Tipo: Es una forma flexible de definir tipos de datos, especialmente cuando quieres combinar cosas o crear alias para tipos complejos.

Ejemplo Sencillo:

Imagina que tienes que hacer una receta y definir los ingredientes:

Interfaz: Sería como definir una lista exacta de ingredientes y cantidades que necesitas para una receta específica.

Tipo: Sería como decir que puedes usar cualquiera de los ingredientes de una lista (unión), o que puedes mezclar dos listas de ingredientes diferentes (intersección).

Resumen:

Interface = Molde específico para objetos.

Type = Alias flexible para cualquier tipo, útil para combinar cosas.

Ahora que hemos hecho un repaso en los conceptos

Cuales son las diferencias?

En TypeScript, tanto interface como type se utilizan para definir la forma o estructura de los objetos, pero tienen algunas diferencias clave. Aquí te dejo un resumen con ejemplos para que lo veas más claro.

1. Sintaxis y Uso Básico

interface: Se usa para describir la forma de un objeto. Es más comúnmente utilizada cuando quieres definir un contrato que una clase u objeto debe seguir.

type: Es más flexible, se puede usar para describir tipos complejos como uniones, intersecciones, y otros.

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

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

2. Extensión (Herencia)

interface: Soporta la herencia múltiple. Puedes extender varias interfaces, lo cual es útil para construir estructuras complejas.

type: También puede extender otros tipos usando intersección (&), pero no tiene soporte para la herencia múltiple explícita como las interfaces.

interface Person {
  name: string;
}

interface Employee extends Person {
  employeeId: number;
}

type Person = {
  name: string;
};

type Employee = Person & {
  employeeId: number;
};

3. Uniones e Intersecciones

type: Permite crear uniones e intersecciones de tipos, lo que te da más flexibilidad a la hora de definir tipos complejos.

interface: No tiene esta capacidad, pero puedes lograr algo similar usando herencia.

// Unión
type Status = "active" | "inactive";

// Intersección
type Admin = User & {
  role: "admin";
};

4. Capacidades de Merging

interface: Permite "merging" automático. Si defines la misma interfaz en varios lugares, TypeScript las combinará automáticamente en una sola.

type: No permite merging. Si defines el mismo type dos veces, obtendrás un error.

interface User {
  name: string;
}

interface User {
  age: number;
}

// Resultado: la interfaz User ahora tiene ambas propiedades, name y age.

5. Tipos Complejos

type: Es más adecuado para definir alias de tipos complejos, como tuplas, uniones, y funciones.

type StringOrNumber = string | number;

type Callback = (input: string) => void;

Resumen:

interface es mejor para definir contratos para objetos y clases, y cuando necesitas usar herencia o merging.

type es más flexible y se recomienda para tipos complejos, uniones, intersecciones y alias de tipos.

Written by Pol Valle

I'm particularly drawn to building apps that are not only functional but also visually appealing and easy to use. I do it by applying SOLID principles, clean architecture and testing to ensure quality.

interface Animal { name: string; age: number; } // Esto es correcto const dog: Animal = { name: "Rex", age: 5 }; // Esto es incorrecto (falta la propiedad `age`) const cat: Animal = { name: "Whiskers" };

type StringOrNumber = string | number; // Correcto: es un string let a: StringOrNumber = "hello"; // Correcto: es un número let b: StringOrNumber = 42; // Incorrecto: no es ni string ni número let c: StringOrNumber = true;