No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Interfaces

12/22
Recursos

Aportes 8

Preguntas 2

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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 鈥渂lueprint鈥 贸 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 鈥渃ontrato鈥 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 鈥渘ew鈥).

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);
}

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 鈥渢ipado鈥 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'
}