Introducción
¿Ya tomaste el Curso de Fundamentos de TypeScript?
Configuración del proyecto con ts-node
New Types
Tuples
Enums
Unknown type
Never type
Funciones
Parámetros opcionales y nullish-coalescing
Parámetros por defecto
Parámetros rest
Sobrecarga de funciones: el problema
Sobrecarga de funciones: la solución
Interfaces
Interfaces
Estructuras complejas
Extender interfaces
Propiedades de solo lectura
Proyecto
Ejemplo de CRUD
Omit y Pick Type
Partial y Required Type
Readonly Type
Acceder al tipado por indice
ReadonlyArray
Próximos pasos
Toma el Curso de Programación Orientada a Objetos con TypeScript
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
En TypeScript, puedes combinar los enums, types e interfaces de varias formas para crear estructuras de datos complejas y precisas.
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
};
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"
};
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
};
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; // 👈 Enum
especificaciones: 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 10
Preguntas 6
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}
Por lo que veo, no hay diferencias entre Type e Interface, más allá de una pequeña diferencia de sintaxis.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?