You don't have access to this class

Keep learning! Join and start boosting your career

Aprovecha el precio especial y haz tu profesión a prueba de IA

Antes: $249

Currency
$209
Suscríbete

Termina en:

2 Días
11 Hrs
57 Min
34 Seg

Estructuras complejas

13/22
Resources

In TypeScript, you can combine enums, types and interfaces in various ways to create complex and precise data structures.

Enums in interfaces

We could associate the typing of one of the properties of an interface with an enum:

enum Color {Black, White, Purple } interface GeometricFigure { name: string; color: Color; } const rectangle: GeometricFigure = { name: "rectangle", color: Color.Purple };

Types in Interfaces

In the attributes of an interface we could use a type to give a customizable type:

type Coordinates = [number, number]; interface Point { location: Coordinates; label: string; }const point: Point = { location: [10, 5], label: "Point A"};

Combining Enums and Types

In TypeScript, it is also possible to put enums and types together. For example, we can declare a type that has the object structure in which one of its properties is a value from the options set belonging to an enum:

{enum Size {Small = "S", Medium = "M", Large = "L"}type Product = { name: string; size: Size; // 👈 Enum }; const t-shirt: Product = { name: "T-shirt", size: Size.Medium };

Interfaces, enums and types together

It is possible to use enums and types within an interface to create a single complex structure in order to generate objects with more detailed and precise information:

enum VehicleType { Automobile, Motorcycle } type Specifications = { make: string; model: string; model: string;year: number; }; interface Vehicle { type: VehicleType; // 👈 Enum Specifications: Specifications; // 👈 Type}// Objectconst vehicle: Vehicle = { type: TypeVehicle.Automobile, specifications: { brand: "Toyota", model: "Corolla",year: 2020} };

By combining these structures, you have the ability to produce more complex data structures and set more detailed types for your objects and variables. This results in code that is clearer, safer, and easier to maintain.

Contributed by: Martin Alvarez (Platzi Contributor).

Contributions 12

Questions 6

Sort by:

Want to see more contributions, questions and answers from the community?

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…

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 “main.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)

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

tstandart usuario

alias tstandart=touch main{.ts} $1.model{.ts} $1.service{.ts}
Las interfaces en TypeScript son herramientas que permiten definir la estructura de un objeto, estableciendo qué propiedades y métodos debe tener. Su objetivo principal es proporcionar un contrato que debe cumplir un objeto, facilitando la verificación de tipos en tiempo de compilación. Esto promueve un desarrollo más seguro y predecible, ya que ayuda a prevenir errores en el código al asegurar que los objetos tengan la forma esperada. Además, las interfaces fomentan la reutilización del código y la claridad en la comunicación entre las diferentes partes de una aplicación.
porque no colocar todos los modelos en una sola carpeta?
Para los que quieran aprender a usar Astro Js (SSG), esta es una forma de usarlo (utilizando interface). Otro motivo por el cual aprender Typescript.
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.