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
Introducción a TypeScript
Por qué usar TypeScript
TypeScript vs. JavaScript
Configurado nuestro proyecto
Atrapando bugs
El compilador de TypeScript
Veamos el TSConfig.json
Tipos de datos primitivos
Qué es el tipado en TypeScript
Tipos inferidos
Numbers
Booleans
Strings
Arrays
Tipos de datos especiales
Any
Union Types
Alias y tipos literales
Null y Undefined
Funciones
Retorno de funciones
Objetos en funciones
Objetos como tipos
Módulos: import y export
Usando librerías que soportan TypeScript
Usando librerías que NO soportan TypeScript
Próximos pasos
Toma el Curso de Tipos Avanzados y Funciones en TypeScript
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
Iniciar sesiónRecursos
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:
- 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.
Contribución creada por: Martín Álvarez.
Aportes 11
Preguntas 6
Ordenar por:
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 👏
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 “no se manejarían los mismo valores”
({
title: string
// ...
}) {
let name = title
// ...
}
Con Javascript también se puede. Con extensiones .mjs.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
o inicia sesión.