No tienes acceso a esta clase

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

Interfaces

12/22
Recursos

Las interfaces nos permiten crear moldes de objetos con sus respectivas propiedades y tipado. Para generar interfaces usamos la palabra reservada interface.

interface Product {
	id: number | string;
	title: string;
	price: number;
	stock: number;
}

Si bien podemos hacerlo mismo con type:

type Product = {
  id: number | string;
  title: string;
  price: number;
  stock: number;
}

Existen algunas diferencias que hacen a interface una mejor opci贸n para definir objetos.

Interfaces vs. Type

Veamos la diferencia entre usar interface y type:

  • Utilizamos type para definir principalmente tipos primitivos o directos (declaraciones cortas y puntuales), mientras que con una interface definimos una estructura llave-valor de propiedades que describan lo que debe tener un objeto.
type Sizes = 'S' | 'M' | 'L' | 'XL';

interface Product {
	id: number | string;
	title: string;
	price: number;
	stock: number;
	size?: Sizes;
}
  • Los interface se pueden f谩cilmente extender (realizar herencia), mientras que con los type no. Esto los hace m谩s escalables.

Contribuci贸n creada por: Mart铆n 脕lvarez (Platzi Contributor) con los aportes de Luis Ariza.

Aportes 13

Preguntas 3

Ordenar por:

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

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

Un type se puede extender pero mediante el uso de &: ```ts //type version type User = { id: string, name: string } type Client = User & { uuid: string } // interface version interface User{ id: string, name: string } interface Client extends User { uuid: string } ```Ambas versiones son validas, es cuesti贸n de estilo. Pero incluso, type es m谩s agnostico.

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 鈥渜uirurgico鈥!, la cual toma la estructura del Product base y agrega una nueva caracter铆stica llamada 鈥渋mpermeable鈥 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 鈥淧erson鈥 que tiene tres propiedades: 鈥渘ame鈥 de tipo string, 鈥渁ge鈥 de tipo number y 鈥済reet鈥 que es una funci贸n sin argumentos y sin valor de retorno.
.
Luego, creamos una funci贸n llamada 鈥渟ayHello鈥 que acepta un objeto de tipo 鈥淧erson鈥 como argumento. Esta funci贸n imprime un mensaje de saludo utilizando las propiedades del objeto y llama al m茅todo 鈥済reet鈥 del objeto.
.
Finalmente, creamos un objeto llamado 鈥渏ohn鈥 que cumple con la interfaz 鈥淧erson鈥 y lo pasamos como argumento a la funci贸n 鈥渟ayHello鈥. Esto imprime en la consola el mensaje de saludo y ejecuta el m茅todo 鈥済reet鈥 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 鈥渢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'
}