No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Aprende todo un fin de semana sin pagar una suscripci贸n 馃敟

Aprende todo un fin de semana sin pagar una suscripci贸n 馃敟

Reg铆strate

Comienza en:

3D
2H
45M
38S

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 11

Preguntas 6

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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 鈥渃alcStock鈥 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 馃憦

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 es genial!!!

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 鈥渘o se manejar铆an los mismo valores鈥

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

	// ...
}

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