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 18

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

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.

- **Definición**: - **type**: Define un tipo de dato que puede ser un primitivo, un objeto o una unión de tipos. - **interface**: Define la estructura de un objeto, incluyendo sus propiedades y métodos. - **Extensibilidad**: - **type**: No se puede extender ni implementar; se puede usar uniones y intersecciones. - **interface**: Puede extenderse y ser implementada por otras interfaces. - **Merging**: - **type**: No permite la declaración de fusión (no se pueden declarar varias veces). - **interface**: Permite fusión de declaraciones (se pueden declarar múltiples veces). - **Uso**: - **type**: Ideal para tipos complejos y uniones. - **interface**: Mejor para describir la forma de objetos y ser reutilizables. Estas diferencias son clave para decidir cuándo usar cada uno en TypeScript.
Una interfaz (`interface`) y un tipo (`type`) en TypeScript son herramientas para definir tipos, pero hay diferencias clave: 1. **Extensibilidad**: Las interfaces pueden ser extendidas mediante `extends` y pueden ser declaradas varias veces (declaración de fusión). Los tipos no pueden ser extendidos y no permiten declaración de fusión. 2. **Definición de tipos**: Los tipos son más flexibles y pueden ser usados para uniones, tipos primitivos, y otros tipos complejos, mientras que las interfaces se usan principalmente para describir la forma de un objeto. 3. **Uso en clases**: Las interfaces son ideales para definir contratos para clases, permitiendo que las clases implementen más de una interfaz. Ambas son útiles, pero la elección depende del contexto y necesidades específicas de la aplicación.
me vuelan la cabeza que las interfaces son objetos donde uso las interfaces para implementar contratos claro con c#
```txt /** * La principal diferencia entre `type` e `interface` en TypeScript radica en su uso y capacidades: * * 1. **Declaración y Extensión**: * - `interface` permite la declaración y extensión múltiple. Puedes declarar una interfaz varias veces y TypeScript las combinará. * - `type` no permite la declaración múltiple. Sin embargo, puedes crear tipos complejos usando intersecciones (`&`). * * 2. **Uso**: * - `interface` se usa principalmente para describir la forma de un objeto, incluyendo métodos y propiedades. * - `type` es más flexible y puede usarse para definir tipos primitivos, uniones, tuplas, y más. * * 3. **Implementación**: * - Las clases pueden implementar `interface` directamente. * - `type` no puede ser implementado por clases directamente. * * 4. **Compatibilidad**: * - `interface` es más compatible con la herencia y la extensión de objetos. * - `type` es más adecuado para tipos complejos y combinaciones. * * En resumen, usa `interface` cuando necesites definir la estructura de un objeto y `type` cuando necesites más flexibilidad en la definición de tipos. */ ```
# **Interfaces vs. Types en TypeScript** ## **Imagina que estás construyendo una casa.** * **Un plano (interface):** Define la estructura general de la casa. Indica cuántas habitaciones habrá, dónde irá la cocina, el baño, etc. Es una especie de molde que guía la construcción. * **Un material de construcción (type):** Especifica las características de un elemento en particular. Por ejemplo, el tipo de madera para las ventanas, el tipo de baldosa para el suelo, etc. **En TypeScript, tanto interfaces como types sirven para definir estructuras de datos, pero tienen enfoques ligeramente diferentes:** ### Interfaces * **Definición:** Son como un contrato que define la forma de un objeto. Especifican las propiedades y métodos que un objeto debe tener. * **Extensibilidad:** Son muy flexibles y pueden ser extendidas para agregar nuevas propiedades o métodos. * **Uso principal:** Para definir la estructura de objetos y como tipos para funciones y variables. ### Types * **Definición:** Son alias para tipos existentes. Puedes crear un nuevo nombre para un tipo primitivo (string, number, boolean) o para una unión o intersección de tipos. * **Flexibilidad:** Menos flexibles que las interfaces, pero permiten crear tipos más complejos combinando otros tipos. * **Uso principal:** Para crear tipos personalizados, aliasing tipos existentes y para tipos literales.

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