No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Curso de TypeScript

Curso de TypeScript

Nicolas Molina

Nicolas Molina

Módulos: import y export

21/24
Recursos

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  <----*/
export function suma(a: number, b: number): number {
    return a + b;
}

export function resta(a: number, b: number): number {
    return a - b;
}

export let numerosRandom = [1, 30, 40, 50];
export type Sizes = "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.

Import

/*---> Archivo: programa.ts  <---*/

import {suma, resta, Sizes} from "./funciones.ts";

Finalmente, las funciones o variables que queramos utilizar desde otro archivo son importadas de la siguiente manera:

  1. Usamos la palabra reservada import
  2. Entre llaves indicamos las funciones y/o variables que queremos acceder. Hacemos una separación con comas
  3. 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.

Contribución creada por: Martín Álvarez.

Aportes 17

Preguntas 8

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

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

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

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}

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 👏

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. ✨

Esto no tiene que ver con TypeScript directamente, pero es un concepto que vi hace poco en un video\* que creo que les puede ser útil al largo plazo. Trabajar de manera modular, como se hace en esta clase, nos permite trabajar con librerías en nuestros proyectos de una manera más eficiente. Por ejemplo, si en nuestro código tuviéramos que acceder a nuestra base de datos (BD) en múltiples partes de nuestro proyecto, una manera sería hacer un llamado a la BD cada vez que lo ocupemos; por otro lado, la manera que se sugiere en el video, la modular, consiste en separar el llamado a la BD desde un solo archivo y crear funciones para cada una de las tareas que se hacen con la BD a lo largo del proyecto. Tener el llamado a una librería, la BD en el caso anterior, en un solo lugar permite cambiar de librerías más fácilmente, ya que el código está separado y abstraído del resto del proyecto, y no se tendría que hacer ese cambio de librería y, muy probablemente, del código en cada parte que se llamó a la librería. Podría hacerse la analogía de usar variables en CSS y tener que cambiar el valor de determinado color cuando se cambia la paleta de colores del proyecto. \*Link del video: <https://www.youtube.com/watch?v=_aqtgF1xM-o>

Si alguno tiene problemas con la importación y le arroja un error tipo este

(node:36128) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)

deben agregar a su configuración en package.json

  "type":"module",

Y si luego de esto obtienen otro error como este:

node:internal/errors:484
    ErrorCaptureStackTrace(err);
    ^

Error [ERR_MODULE_NOT_FOUND]: Cannot find module 'C:\Users\Intel\Documents\github\tsproject\dist\user.services' imported from C:\Users\Intel\Documents\github\tsproject\dist\executable.js
    at new NodeError (node:internal/errors:393:5)
    at finalizeResolution (node:internal/modules/esm/resolve:323:11)
    at moduleResolve (node:internal/modules/esm/resolve:916:10)
    at defaultResolve (node:internal/modules/esm/resolve:1124:11)
    at nextResolve (node:internal/modules/esm/loader:163:28)
    at ESMLoader.resolve (node:internal/modules/esm/loader:841:30)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:424:18)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:76:40)
    at link (node:internal/modules/esm/module_job:75:36) {
  code: 'ERR_MODULE_NOT_FOUND'
}```


la solución que conseguí fue esta configuración en tsconfig.json -> de esta forma completa la extensión en el path del import 


{
“compilerOptions”: {
“target”: “ES2022”,
“outDir”: “./dist”,
“rootDir”: “./src”,
“module”: “ES2022”,
“esModuleInterop”: true,
“strict”: true
},
“include”: [“src/**/*.ts”],
“exclude”: [“node_modules”]
}

El proceso de módulos en TS es algo similar a trabajar en el framework de Spring creando APIs

Tengan cuidado con las comillas, no se puede importar con las siguientes comillas `` (inversas) , pero si con estas ’ '.

aaaaaaaaaa ya voy entendiendo como para que sirven los framworks jejejej

Una alternativa para sumar el stock!

export const calcStock = (): number => {
  return productos
    .map((item) => item.stock)
    .reduce((accu, curren) => accu + curren);
};

El ultimo problema se puede solucionar sin necesidad de cambiar el atributo en cada archivo que lo requiere, creando una nueva variable en el scope de la función que su nombre en name y su valor title, la retornamos al backend con su respectivo nombre sin necesidad de cambiar en cada archivo, esto puede ser una mala practica porque “no se manejarían los mismo valores”

({
	title: string
	// ...
}) {
	let name = title

	// ...
}

Con Javascript también se puede. Con extensiones .mjs.