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.

Un ejemplo de la extensión de interface, usando el código que se estuvo trabajando en la clase.

Cree una nueva interface llamada “quirurgico”!, la cual toma la estructura del Product base y agrega una nueva característica llamada “impermeable” de tipo boolean:

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

interface quirurgico extends Product {
  impermeable: boolean,
}

let trajeQuirurgico:quirurgico = {
  id: 20,
  title: 'Traje rosa',
  createdAt: new Date(),
  stock: 30,
  size: 'M',
  impermeable: true
}

Interfaces

Interfaces

En TypeScript, una interfaz es una forma de definir la estructura de un objeto. Proporciona un conjunto de reglas que deben seguir los objetos para cumplir con esa interfaz. Esto permite establecer contratos y asegurarse de que los objetos cumplan con ciertas propiedades y métodos específicos.
.
Aquí tienes un ejemplo práctico que muestra cómo se utiliza una interfaz en TypeScript:

// Definimos una interfaz llamada "Person"
interface Person {
  name: string;
  age: number;
  greet: () => void;
}

// Creamos una función que acepta un objeto que cumpla con la interfaz "Person"
function sayHello(person: Person) {
  console.log(`Hola, soy ${person.name} y tengo ${person.age} años.`);
  person.greet();
}

// Creamos un objeto que cumple con la interfaz "Person"
const john: Person = {
  name: "John",
  age: 30,
  greet: () => {
    console.log("¡Hola! ¡Mucho gusto!");
  },
};

// Llamamos a la función sayHello pasando el objeto john
sayHello(john);

En este ejemplo, hemos definido una interfaz llamada “Person” que tiene tres propiedades: “name” de tipo string, “age” de tipo number y “greet” que es una función sin argumentos y sin valor de retorno.
.
Luego, creamos una función llamada “sayHello” que acepta un objeto de tipo “Person” como argumento. Esta función imprime un mensaje de saludo utilizando las propiedades del objeto y llama al método “greet” del objeto.
.
Finalmente, creamos un objeto llamado “john” que cumple con la interfaz “Person” y lo pasamos como argumento a la función “sayHello”. Esto imprime en la consola el mensaje de saludo y ejecuta el método “greet” del objeto.
.
El uso de interfaces en TypeScript nos permite definir estructuras de objetos reutilizables y asegurarnos de que los objetos cumplan con ciertas reglas. Esto ayuda a prevenir errores y facilita el trabajo en proyectos más grandes y complejos.
.
Espero que este ejemplo te haya ayudado a comprender el concepto de interfaces en TypeScript. Si tienes alguna otra pregunta, ¡estaré encantado de ayudarte!

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'
}