No tienes acceso a esta clase

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

Estructuras complejas

12/22
Recursos

En TypeScript, puedes combinar los enums, types e interfaces de varias formas para crear estructuras de datos complejas y precisas.

Enums en interfaces

Podr铆amos asociar el tipado de una de las propiedades de un interface con un enum:

enum Color {
聽 Negro,
聽 Blanco,
聽 Morado
}

interface FiguraGeometrica {
聽 nombre: string;
聽 color: Color;
}

const rectangulo: FiguraGeometrica = {
聽 nombre: "rect谩ngulo",
聽 color: Color.Morado
};

Types en Interfaces

En los atributos de un interface podr铆amos usar un type para dar un tipado customizable:

type Coordenadas = [number, number];

interface Punto {
聽 ubicacion: Coordenadas;
聽 etiqueta: string;
}

const punto: Punto = {
聽 ubicacion: [10, 5],
聽 etiqueta: "Punto A"
};

Combinaci贸n de Enums y Types

En TypeScript, tambi茅n es posible juntar los enums y types. Por ejemplo, podemos declarar un type que tenga la estructura de objeto en el que una de sus propiedades es un valor del set de opciones perteneciente a un enum:

enum Size {
聽 Chico = "S",
聽 Mediano = "M",
聽 Grande = "L"
}

type Producto = {
聽 name: string;
聽 size: Size; // 馃憟 Enum
};

const camiseta: Producto = {
聽 name: "Camiseta",
聽 size: Size.Mediano
};

Interfaces, enums y types juntos

Es posible usar enums y types dentro de un interface para crear una sola estructura compleja para poder generar objetos con informaci贸n m谩s detallada y precisa:

enum TipoVehiculo {
聽 Autom贸vil,
聽 Motocicleta
}

type Especificaciones = {
聽 marca: string;
聽 modelo: string;
聽 a帽o: number;
};

interface Vehiculo {
聽 tipo: TipoVehiculo; // 馃憟 Enumespecificaciones: Especificaciones; // 馃憟 Type
}

// Objeto
const vehiculo: Vehiculo = {
聽 tipo: TipoVehiculo.Autom贸vil,
聽 especificaciones: {
聽 聽 marca: "Toyota",
聽 聽 modelo: "Corolla",
聽 聽 a帽o: 2020
聽 }
};

Al combinar estas estructuras, tienes la capacidad de producir estructuras de datos m谩s complejas y establecer tipos m谩s detallados para tus objetos y variables. Esto da como resultado un c贸digo m谩s claro, seguro y f谩cil de mantener.

Contribuci贸n creada por: Mart铆n 脕lvarez (Platzi Contributor).

Aportes 9

Preguntas 6

Ordenar por:

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

En algunos casos las clases pueden tener el mismo nombre que las interfaces. Por esa raz贸n es recomendable nombrar a las interfaces con el prefijo Interface. Aqu铆 un ejemplo

class Person {
    @code...
}

interface PersonInterface {
    @code...
}

As铆 evitamos esos posibles errores

Las interfaces pueden ser muy 煤tiles para tener un c贸digo mas f谩cil de mantener y ordenado, teniendo en cuenta el principio de responsabilidad 煤nica, podemos crear nuestras entidades de manera que tengamos el modelo (conjunto de atributos de la entidad) y por otra parte los servicios (m茅todos que permiten interactuar con la entidad) por separado.

Los modelos pueden requerir a otros modelos como parte de su estructura, para este caso importamos las interfaces que necesitamos integrar como valor anidado de alguno de los atributos del modelo.

Esto me est谩 recordando mucho a las bases de datos SQL鈥

El principio de Responsabilidad 脷nica nos viene a decir que un objeto debe realizar una 煤nica cosa. Un m贸dulo tiene una 煤nica raz贸n para cambiar.

Para crear estructuras complejas de interfaces es necesario definir el model de cada uno de elos.

Por ejemplo, en u E-commerce existe un producto el cual esta compuesto por distintas variables, y para este producto podemos definir su interfaz

Un usuario tambi茅n tiene sus propios datos y podr铆amos definir una interfaz para ese usuario

Y al crear una compra, el usuario esta generando una orden la cual tambi茅n tiene una interfaz e incluso esa orden incluye un usuario, que es el usuario que compro, y tambien incluye uno o m谩s productos.

Lo m谩s recomendable es crear un modelo de cada uno de ellos siguiendo los siguientes nombres de ejemplo product.model.ts, user.model.ts, order.model.ts, donde estas interfaces se puedan exportar e importar, agregando en cada archivo de estos modelos el export interface .... de esta manera podemos agregar y ampliar las interfaces, por ejemplo:

Imaginemos que ya creamos la interfaz del producto y del usuario, y solo necesitamos agregarla en la interfaz de la orden.

import { Product } './../products/product.model'
import { User } './../products/product.model'

export interface Order {
id: string;
createdAt: Date;
products: Product[];
user: User;
} 

Mis apuntes: (comentarios bienvenidos)

En las estructuras complejas de typescript se maneja un orden de carpetas para definir mejor cada una de las integraciones en la app donde:
1. Se define la /app en el /src
2. Creamos 鈥渕ain.ts鈥 que va a correr el modelo y lo que le solicitemos
3. Creamos la carpeta /products donde agregamos:
1. Creamos products.model.ts => donde vamos a escribir las interfaces iniciales que daran forma al modelo
2. Creamos product.service.ts => donde vamos a escribir la l贸gica de nuestra app
4. Creamos la carpeta /categories donde agregamos:
1. Creamos category.model.ts => donde vamos a agregar cada sub-categoria necesaria de nuestro primer modelo definido en products.model.ts
5. Creamos la carpeta /users
1. Creamos user.model.ts => donde vamos a agregar cada sub-categoria de los usuarios, que puede contener tanto interfaces, types o enums (listas)
6. Cremaos la carpeta /orders
1. Creamos order.model.ts => donde vamos a agregar el tipado para la cub-categoria de la orden de compra (es un tipado que se alimenta de otros tipados)

tstandart usuario

alias tstandart=touch main{.ts} $1.model{.ts} $1.service{.ts}
En la programaci贸n orientada a objetos, en el momento que se va a definir un modelo del dominio, es sumamente recomendable realizar el dise帽o utilizando un diagrama de clases UML. Al hacer este diagrama, te permite dise帽ar de manera m谩s visual las clases de tu aplicaci贸n, la herencia, las interfaces, composiciones, agregaciones, dependencias, etc. Es algo muy sencillo de aprender y otorga un valor muy alto a la hora de construir proyectos!!

Por lo que veo, no hay diferencias entre Type e Interface, m谩s all谩 de una peque帽a diferencia de sintaxis.