Interfaces

Interfaces en TS

Las interfaces funcionan muy similar a como lo hace type, pero en las interfaces solo aplica para los objetos

type Size = "S" | "M" | "L";
type User = {
  id: string,
  name: string
}
interface UserInterface {
  id: string,
  name: string  
}

¿Entonces, porque usar interfaces si puedo usar type?

La razón es sencilla, con las interfaces podemos heredar otras interfaces, y con los type no podemos hacer eso.

interface HumanInterface {
  name: string,
  lastName: string
}
interface HeroInterface extends HumanInterface {
  superPower: string
}

DIFERENCIAS ENTRE INTERFACES Y CLASES

• Una clase, es un template que contiene métodos, variables… el esqueleto de un objeto.
• Una interfaz, es un “blueprint” ó plano que describe que propiedades debe tener el objeto.
• Una clase te permite inicializar nuevos objetos, una interfaz no.

¿Cuándo usar interfacez?

• cuando necesites crear un “contrato” de las propiedades y funciones que un objeto debe tener. Son muy útiles cuando el mismo objeto se debe repetir en varios archivos diferentes. Prácticamente, se utilizan para tipar nuestro código.

¿Cuando usar clases?

• Cuando quieras crear objetos que tengan una función real en el código (más allá de solo tipar nuestras variables). Cuando necesites usar un constructor para inicializar el objeto y que tenga default values, ó cuando requieras crear nuevas instancias de eso objeto (con la palabra “new”).

Espero que sea útil para los que tenían esta duda al igual que yo. Si tienen algún otro punto sería increíble leerlos ❤️

Les comparto mis apuntes. 😄

¿Qué es?

Es una forma interesante de trabajar con los objetos y clases.

Uso

Lo podemos usar de la misma manera que los types.

Diferencias entre type e interface

• Con type yo puedo definir tipos primitivos o directos (declaraciones cortas y puntuales), mientras que una interface necesita todo un cuerpo.
• A interface lo usamos para un conjunto de atributos de valores.
• Interface tiene la particularidad de que se puede extender, mientras que los type no.

Sintaxis

interface interfaceName {
	statements
}

Código de la clase

type Sizes = 'S' | 'M' | 'L' | 'XL';
type UserId = string | number;

interface Product {
    id: string | number;
    title: string;
    createdAt: Date;
    stock: number;
    size?: Sizes;
}

const products: Product[] = [];
products.push({
    id: '1',
    title: 'p1',
    createdAt: new Date(),
    stock: 90,
});

const addProduct = (data: Product) => {
    products.push(data);
}

Comparto este comparativo entre interfaces y type en la doc oficial https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#differences-between-type-aliases-and-interfaces

Si bien type e interface hacen casi lo mismo, interface puede verse como un conjunto de tipos, mientras que type se puede declarar en una sola línea.

interface se puede extender, pero type no.

type Sizes = 'S' | 'M' | 'L' | 'XL';

interface Product {
  id: string | number;
  title: string;
  createdAt: Date;
  stock: number;
  size: Sizes;
}

Dejo este link donde se muestra las diferencias entre type y interfaces:
https://apuntes.de/typescript/interfaces-vs-types/#gsc.tab=0

Dif.: Es posible extender desde un type, pero no se puede agregar a un type previamente creado otro campo.
En interfaces esto si es posible.

Para definir el “tipado” de las props en react se pueden usar type o interfaces, pero es recomendable usar interfaces en caso de que se vayan a extender

Si vemos un type y una interfaz a simple vista podríamos decir que es lo mismo, pero la respuesta sencilla es que no. Ya que puede que se parezcan y la manera de definirlas sea muy parecida, la increíble diferencia es que las interfaces son más escalables, y podemos extenderla para poder añadirle más usos.

type Model = 'small' | 'medium' | 'big'

// definiendo un type
type Product = {
	id: string,
	name: string,
	price: number,
	model: Model,
}

//definiendo una interfaz
interface Product = {
	id: string,
	name: string,
	price: number,
	model: Model,
}

//heredando o extendiendo la interfaz
interface Product extends ProductDetails {
	color: string,
	state: 'new' | 'used' | 'like new'
}