Nuestro código puede ser dividido en varios módulos (archivos), por lo que para poder usar las funciones o variables que existen en uno y queramos acceder desde otro, utilizamos import y export.
Export
/*----> Archivo: funciones.ts <----*/exportfunctionsuma(a:number, b:number):number{return a + b;}exportfunctionresta(a:number, b:number):number{return a - b;}exportlet numerosRandom =[1,30,40,50];exporttypeSizes="S"|"M"|"L"|"XL";
Como observamos, tenemos un archivo llamado funciones.ts la cual contiene dos funciones: suma y resta. Si estas queremos usarlas desde otro archivo, necesitamos usar la palabra reservada export justo antes de definir nuestra función (lo mismo aplica para las variables). De esta forma indicamos que serán exportados para ser utilizados desde otro archivo JavaScript/TypeScript.
Finalmente, las funciones o variables que queramos utilizar desde otro archivo son importadas de la siguiente manera:
Usamos la palabra reservada import
Entre llaves indicamos las funciones y/o variables que queremos acceder. Hacemos una separación con comas
Usamos la palabra reservada from, seguido de, entre comillas dobles o simples, la ruta de la ubicación en la que se encuentra el archivo del cual estamos importando su código.
Nota
Si es un módulo TypeScript lo que estamos importando, es importante que en la ruta de los import figure la extensión .ts de dicho archivo. Si es un archivo JavaScript, colocar la extensión .js es opcional.
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"constproducts:Product[]=[]constaddProduct=(data:Product)=>{ products.push(data)}const calcStock =():number=>{lettotal: number =0 products.forEach(el=>{ total += el.stock})return total
}// exportado todo como un objetoexport{ 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 = 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 mismaconsole.log(arr1);// [ 1, 2, 3, 4, 5 ]console.log(arr2);// [ 1, 2, 3, 4, 5 ]console.log(arr1 === arr2);// true
Primitive and Non-primitive data-types in JavaScript
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.
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:newDate(1993,1,1),stock:5});console.log(products);createProduct({name:"Pro2",createdAt:newDate(1993,1,1),stock:6,size:"XL"});console.log(products);const total =calcStock();console.log(total);
product.service.ts
import{ product }from"./product.model";exportconstproducts:product[]=[];exportconstcreateProduct=(data:product)=>{ products.push(data);}exportconst 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:newDate(1993,1,1),stock:5});console.log(products);createProduct({name:"Pro2",createdAt:newDate(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 treatmentconst products:Product[]=[];constaddProduct=(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:
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.
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
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
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?
me gustaría saber si puedo hacer el export {sizes,product} o en ts es necesario hacerlo tal cual el ejemplo. gracias
Hola, Gilbert.
Sí se puede exportar todo junto como un objecto.
Saludos.
Disculpen mi ignorancia...
¿Alguien sabe qué significa "tipol" o "titol"?
No distingo que palabra menciona, cuando el maestro no escribe bien una palabra y luego menciona que existe un "tipol" o "titol", algo así.
Alguien sabe qué palabra dice.
Recalco, disculpen mi ignorancia.
Creo que quieres decir un "title" eso es uno de los nombres de los atributos del objeto. Si te fijas abajo el primer atributo es el title, a eso es que se refiere el profesor. Espero y te ayude. Saludos!
Entiendo, es que ya lo he escuchado de otros profes y no distingo esa palabra, porque nunca lo han explicado.
Mi hipótesis fue, bueno, dice el maestro un tape (taip: es una cinta para tapar o corregir algo), consideré ese, pero pensé bien y dije, no tiene nada que ver una cinta aquí.
