Módulos: import y export
Contenido del curso
Rodrigo Andrés Moreno Pertúz
Yilver Said García González
Carlos Rodríguez
Pedro Matías Cuevas Meza
Alessandra Amicarella
Anfernee Valera
Rafael Moro
Fernando Peralta
Rafael Moro
Irving Juárez
Alessandra Amicarella
Daniel Hernández
Daniel Hernández
Raycris Maldonado
Andres David Quintero Caicedo
Pedro Andrés Chaparro Quintero
Freddy Andrés Camargo Ocasión
Nicolas Molina
Profesor
Libia Perez
Kevin Perdomo
Miguel Angel Martheyn Berbesi
Víctor Andrés Córdova Poma
Nicolas Molina
Profesor
Donovan RM
Paula Inés Cudicio
SANTIAGO CANO GONZALEZ
Jose Fabio Ortega Estrada
Marvin Javier Santos Fernández
Itzam G
Paola Sofía Mendoza
Carlos Valdez
Nicolas Betancur Pavas
Hiram Rodriguez Gomez
lo del minuto 11:30 se puede hacer con el mismo visual estudio code con click derecho cambiar el nombre del simbolo o la tecla f2
Este comentario es oro puro, más cuando de programación modular se trata
Si, correcto es interesante como microsoft nos facilita la vida, como es una funcionaldiad que antes era de TS, ahora lo implementa directamente desde VScode para varios lenguajes!
Para no repetir el export se puede exportar todo junto al final del archivo como un objeto
type Sizes = 'S' | 'M' | 'L' | 'XL'; type Product = { title: string, createdAt: Date, stock: number, size?: Sizes } export { Sizes, Product, }
Al momento de utilizar alguno de los, cambia en algo su import?
Hola alessandra. Respondiendo a tu pregunta: No, no cambia nada el import.
Yo en mi código lo tengo todo exportado al final (es importante exportarlo todo como un objeto). Y lo importo de misma manera (como si el módulo fuera un objeto y lo estoy destructurando)
product.service.ts
import { Product } from "./product.model" const products: Product[] = [] const addProduct = (data: Product) => { products.push(data) } const calcStock = (): number => { let total: number = 0 products.forEach(el => { total += el.stock }) return total } // exportado todo como un objeto export { products, addProduct, calcStock }
main.ts
import { addProduct, calcStock, products } from "./product.service";
Otra manera de escribir "calcStock" usando reduce:
import {Product} from './product.model' const products: Product[] = [] const addProduct = (data: Product) => products.push(data) const calcStock = ():number => products.reduce((acc, product) => acc + product.stock, 0) export {products, addProduct, calcStock}
He leído en varios lados que usar reduce es una mala practica
Hola Fernando.
¿Cuál es el argumento porque usar reduce es mala práctica?
Saludos.
Podemos concluir que para crear módulos, solo tenemos que exportar ciertas variables de cualquier archivo e importarlas en otros. . También podemos notar que los alias pueden ir en su propio archivo, para que puedan ser importados en todos los demás archivos que los ocupen.
Excelente clase 👏
¿Por qué no me está quedando la estructura de carpetas del src en dist? Todos los archivos js están quedando en la raíz.
tienes que hacer la configuración del archivo tsconfig.json y activar el outDir en ese archivo. además de crear la carpeta dist en el root del proyecto
"outDir": "./dist",
Hola a todos. Quisiera saber por qué es posible añadir nuevos elementos a un array que ha sido declarado como constante.
const products: Product[] = [];
products.push( newProduct ); // ¿Luego no es inmutable?
Gracias.
Un array es un tipo de dato no primitivo, y al igual que los objetos, lo que guardas en la constante no es el array en sí, sino la referencia en memoria al array. Cuando insertas un elemento al array, la referencia a memoria sigue siendo la misma, sin importar que los elementos cambien.
Es por eso mismo que si comparas dos arrays con los mismos elementos te dará false, ya que a pesar de que sus elementos son los mismos, la referencia a memoria es diferente:
const arr1 = [1, 2, 3, 4]; const arr2 = [1, 2, 3, 4]; console.log(arr1 === arr2); // false console.log(arr1 == arr2); // false
Otra cosa curiosa es esta:
const arr1 = [1, 2, 3, 4]; const arr2 = arr1; arr2.push(5); // Solo se inserta en el array 2 // Pero el elemento está presente en ambos arrays // ya que la referencia a memoria es la misma console.log(arr1); // [ 1, 2, 3, 4, 5 ] console.log(arr2); // [ 1, 2, 3, 4, 5 ] console.log(arr1 === arr2); // true
Puedes leer más en estos enlaces:
Hay un equivalente de lo que es TypeScript para JavaScript, cuando se usa Python en el backend?
Hola, el equivalente sería Python v3.3 😎, ya que desde esta versión Python soporta tipado como parte del propio lenguaje.
Para los que ven el curso recien, cuando hacen el tsc --init en la terminal, y les crea el archivo tsconfig.json, fijense que si el module es "commonjs" entonces el verbatimModuleSyntax debe estar en false, porque yo lo tenia en true y me estaba dando dolores de cabeza el product.service.ts para exportar
Asegurense que en tu tsconfig.json tengan
"module": "commonjs"
"verbatimModuleSyntax": false,
Por mi parte me funciono de esta manera:
import type { Product } from './product.model'
Por qué creo un archivo llamado main.ts, en vez de index.ts como se suele hacer? O dentro de Ts se trabaja de esa manera?
Hola, no importa mucho el nombre, el archivo puede llamarlo index.ts e igual funciona si te sientes más cómodo así no hay problema lo puedes trabajar así 🙂
Class
product.model.ts
import { createProduct, calcStock, products } from "./product.service"; createProduct({ name:"Pro1", createdAt:new Date(1993,1,1), stock:5 }); console.log(products); createProduct({ name:"Pro2", createdAt:new Date(1993,1,1), stock:6, size:"XL" }); console.log(products); const total = calcStock(); console.log(total);
product.service.ts
import { product } from "./product.model"; export const products:product[]=[]; export const createProduct=(data:product) =>{ products.push(data); } export const calcStock = ():number => { let total = 0; products.forEach((item)=> { total += item.stock; }); return total; };
main.ts
import { createProduct, calcStock, products } from "./product.service"; createProduct({ name:"Pro1", createdAt:new Date(1993,1,1), stock:5 }); console.log(products); createProduct({ name:"Pro2", createdAt:new Date(1993,1,1), stock:6, size:"XL" }); console.log(products); const total = calcStock(); console.log(total);
Esto es genial!!!!
Quieren refactorizar el código?
Como comentan varios compañeros podemos exportar todas las funciones al final del código como si fuera un objeto.
import { Product } from './product.model'; // .service <name_convention> relates to the Methods or Data treatment const products: Product[] = []; const addProduct = (data: Product) => { products.push(data); }; const inStock = (): number => { // Oportunidad para Refactorizar con los métodos de Arrays // Curso en platzi :) const total = 0 products.forEach(item => total += item.stock) return total; }; export { products, addProduct, inStock };
Vemos que ya queda todo de manera organizada, pero ese forEach 🤔 asignando una variable por fuera... Podemos ver el curso Manipulación de Arrays y pasar a tener algo como esto:
const inStock = (): number => { // Manipulación de Arrays return products.reduce((prev, current) => prev + current.stock, 0); };
Espero les motive a seguir aprendiendo y también más importante aún apoyar a los compañeros dentro y fuera de clase. ✨
Gracias por tu aporte, en el primer escenario debes cambiar total como variable let o var, ya que al entrar en el ciclo forEach no permite cambios ya que es una constante.
// product.model.ts
// Aqui se define cómo será la estructur
// o el modelo de los datos de lo que se
// va a realizar.
// Se usan las interface o class.
// Utilizamos export para decir que se va utilizar en otro
// archivo de código, para que utilizamos sus propiedades.
export type Sizes = 'M' | 'S' | 'XL' | 'L';
export type Product = {
title: string,
createAT: Date,
stock: number,
talla?: Sizes
};
// product.service.ts// Aque se coloca la lógica relacionada con los productos.
// Allá en el models se utiliza export para llamar
// lo que se necesita se utiliza import y dentro de las
// {lo que se necesita} en este caso se importará la
// estructura de Product, colocamos from es decir de donde
// viene y al nombre del archivo.
import {Product} from './product.model';
// Exportamos para usarse donde sea la lista por el momento
// vacia de productos.
export const List_Product:Product[] = [];
// Exportamos la función para añadir el producto.
export const Add_Product = (data: Product) =>{
List_Product.push(data);
}
// Exportamos el total que hay de stock que vamos
// a retornar una valor númerico.
export const Calcular_Stock = (): number =>{
// una variable que se encargará de almacenar
// el total de stock
let total = 0;
// Accedemos a la lista la iteramos
List_Product.forEach((item)=>{
// Y le decimos que el total se va a sumar
// hacia el stock, es decir, por cada stock que
// hay en la lista de productos se sumarán
total += item.stock;
})
// Mostramos el total.
return total;
}
// main.ts// AQUI SE EJECUTA EL PROGRAMA.
// Importamos el Add_Product que está en product.service.ts
// Importamos el Calcular_Stock que está en product.service.ts
// Importamos el List_Product que está en product.service.ts
import { Add_Product, Calcular_Stock, List_Product } from "./product.service"; // Importamos el archivo que almacena todo eso
// Añadimos los producto.
Add_Product({
title: 'Laptop',
createAT: new Date(2025,1,2),
stock: 20
});
Add_Product({
title: 'Camisa',
createAT: new Date(2000,7,15),
stock: 15,
talla: 'M'
});
// Mostramos la lista en la que ya se añadieron los productos.
console.log(List_Product);
// Creamos una variable y le pasamos de parámetro la función
// Para calcular el total de stock en todos los productos.
const total = Calcular_Stock();
// Mostramos el total.
console.log(total);
Hola. En mi opinión, no es conveniente cambiar “verbatimModuleSyntax” a false, porque esta opción permite a TypeScript detectar si se están importando “types”, los cuales, en tiempo de ejecución podrían generar errores (https://www.typescriptlang.org/tsconfig/#verbatimModuleSyntax)
Ahora, para solucionar los errores al tener activada la opción “verbatimModuleSyntax: true”, basta señalar si lo que se está importando es un “type”:
import { type Products } from './product.model.js';
Adicionalmente, también es válido agregar en los archivos .ts la ruta explícita de los archivos .js que se importan, por ejemplo:
import { type Products } from './product.model.js'; import {addProduct, products, calcStock} from './product.service.js';
De forma que no tengan problemas al ejecutar: node main.js
Hay algún motivo en particular por qué para identificar el modelo y el archivo de service se les puso la extención en el nombre en vez de separarlos en carpetas "models" y "services" respectivamente?
al final es decision de cada quien como maneja la estructura de su proyecto (o del equipo con el que eswtes), por ejemplo yo prefiero tal como tu lo dices por carpetas, me parece mas organizado
Hola platzi, tengo un problema y es que el análisis estático de ts, al yo enviarle esta ubicación de modulo sin especificar el formato ".ts" import { products, addProduct } from "./product.services" el lo encuentra sin problema y no me lanza errores, pero en la ejecución JavaScript, como esta escrita así (sin especificar el formato) al correrlo con NPM START javacripts(nodejs) no reconoce donde esta el archivo, pero al yo manualmente escribir el formato ".js" import { products, addProduct } from "./product.services.js"; ahí si logra encontrar el modulo y corre todo correctamente a que se debe esto y como puedo arreglar esto
Hola Platzi.
Al momento de ejecutar el compilador de Typescript, en teoría realiza todo sin errores. Pero al revisar el archivo product.model.js, me doy cuenta que lo único que aparece en el archivo es la siguiente línea:
export {};
Y al ejecutar el main.js con node, marca error porque esto el modelo de product está vacío. Estuve experimentando, y noté que sólo pasa cuando intento exportar declaraciones de tipo type como el **Sizes **y **Product **(otras declaraciones las exporta sin problema).
¿Alguien tiene una idea de cómo resolver este problema?
