Objetos en funciones

Ya me veo aplicando todo esto junto a React 😃

Mientras más avanzo más me gusta typescript

Destructuring Objects en argumentos con tipado

Tenia la duda de como hacer destructuring de los objectos al recibirlos por argumento y al mismo tiempo mantener el tipado. Investigando un poco encontré esta solución.

Donde antes iba el nombre del argumento ahora iría el destructuring, mientras que el tipado sigue igual que siempre

const login = ({ email, password }: { email: string; password: string }) => {
  console.log(email, password);
};

Espero que les sirva!

Definitivamente empezare a usar typescript

Yo era un hater de TS pero desde hace 7 meses que por cosas del trabajo me vi en la obligación de agregarlo a mi stack, me he dado de cuenta de lo necesario y valioso que es.

es una barbaridad como explica Nico, Exelente curso!!!

Yo lo hice de esta manera

(() => {
  type User = { email: string; password: string | number };

  const login = (user: User) => {
    console.log(user.email, user.password);
  };

  const jesusUser = {
    email: "hdjesus",
    password: 12121,
  };

  login(jesusUser);
})();

(() => {
  const login =(data:{email:string,password:number})=>{
    console.log(data.email,data.password);
  }

  // login ("[email protected]","12121212");
  login({
    email:"[email protected]",
    password:12121212
  });

  type Sizes = 'S' | 'M' | 'L' | 'XL';

  const products:any[]=[];

  const addProduct=(data:{
    title:string,
    createdAt:Date,
    stock:number;
    size?:Sizes
  }) =>{
    products.push(data);
  }

  addProduct({
    title:"pro1",
    createdAt:new Date(1993,1,1),
    stock:12
  });
  console.log(products);

  addProduct({
    title:"pro1",
    createdAt:new Date(1993,1,1),
    stock:12,
    size:"XL"
  });
  console.log(products);
})();

Nunca entendí por qué la gente usaba TypeScript, ahora ya sé por qué.

Me encantaria ver un curso de React con typescript

Es mucha información pero la clase sirve para saber las bases y saber que existen ciertas cosas, lo demás se aprende con practica y documentación por si se olvida algo.

Me parece genial el uso de TypeScript. La única cosa mala que le veo por ahora es que es DEMASIADO verboso 😅

Profe Nicolas: muy buenas las clases

Por dios TypeScript es tan hermoso

✅

Es como Java para web.
Casi que JavaScript + Java

Me había tardado mucho en decidir a aprender Typescript, y ahora estoy feliz de comenzar a hacerlo.

Estoy muy entusiasmado por comenzar a integrar Typescript en los proyectos en los que estoy aprendiendo.

Mi aporte tipando objetos:

  type Sizes = 'S' | 'M' | 'L' | 'XL' | 'One Size';
  type Product = { title: string; stock: number; size?: Sizes };

  // Array de objetos de tipo: 'Product'
  const products: Array<Product> = [];

  // Agrega el tipado de 'Product' al argumento de 'producto'
  const addProduct = (product: Product) => {
    products.push(product);
  };
  addProduct({ title: 'Pantalon', stock: 12, size: 'L' });
  addProduct({ title: 'Camisa', stock: 3 });
  addProduct({ title: 'Cinturón', stock: 4 });
  addProduct({ title: 'Medias', stock: 4, size: 'One Size' });
  console.table(products);

Dios que maravilloso!! Ya quiero comenzar a hacer mis APIS con Typescript

Este curso me esta gustando muchísimo! Aún no he hecho el Practico de JS, pero voy a hacerlo mientras aplico lo que aprendí acá! Gracias por tan buen contenido! ♥

Hola, observando los aportes de los compañeros y aplicando lo aprendido vamos a ver un Ejemplo de Literal types y destructuración de objetos en la función.

// Creamos nuestro tipo especial.
type LoginType = {
    email: string;
    password: string;
  };

// Esta función retorna un tipo -> ________ ?
  const login = (data: LoginType) => {  
    const { email, password } = data; // Finalmente asignamos las variables
    console.log(email);
  };

  login({ email: '[email protected]', password: 'pedro123' });

También se puede usar parámetros que son desestructurados y así evitar declarar el objeto de manera explicíta. Gracias a eso modifique la primera función que pasa de usar data como objeto intermedio:

const login = (data : {email:string, password?: string}) => {
    console.log(data.email, data.password);
}

A escribirse de manera mas corta, omitiendo la declaración explícita del objeto de la siguiente forma:

  const loginV2 = ( {email, password}: {email: string, password?: string}) => {
    console.log(email,password);
 }

Y como ven del lado derecho, donde se declaran los tipos, se puede incluir password de forma opcional usando la misma sintaxis que vimos anteriormente usando el signo de interrogación (?). Por lo que llamar loginV2 se podría hacer con un solo argumento: loginV2({email: "[email protected]"}) esto si deseamos incluir parámetros opcionales dentro de nuestra función.

Tambien podemos usar la palabra reservada type que typeScript nos brinda para que el parametro sea esperado como un objeto

(()=>{
  type Cat={
    name:string,
    raza:string,
    age:number
  }
  const printInfoCat=(cat:Cat)=>{
    console.log(`el gato ${cat.name} es de la raza ${cat.raza} con una edad de ${cat.age}`)
  }
  printInfoCat({name:'Gatito',age:2 ,raza:'cualquier'})
})

(() => {
  type DataObj = {
    email: string
    password: string
    age: number
  }
  const login = (data: DataObj): string => {
    const { email, password, age } = data
    return `email: ${email} password: ${password} age: ${age}`
  }
  const email = 'asd'
  const password = 'asd'
  const age = 32
  console.log(login({email,password,age}));

})()

Excelente esto de usar objetos dentro de las funciones 😃