No tienes acceso a esta clase

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

Objetos en funciones

19/24
Recursos

Nuestras funciones pueden recibir objetos como argumentos. En TypeScript tambi茅n podemos declarar el tipado de estos. Veamos un ejemplo:

//TypeScript
function imprimirDatos( data: { username: string, email: string } ): void {

    console.log(`Tu nombre de usuario es ${data.username} y tu email es ${data.email}`)
    
}

imprimirDatos({
      username: 'freddier',
      email: '[email protected]'
})

En el ejemplo, el nombre data hace referencia al objeto que recibir谩 la funci贸n imprimirDatos. Por ello, para acceder al valor de username lo definimos en el console.log como data.username y para el email como data.email, pues as铆 es como se accede a las propiedades de un objeto.

Finalmente, cuando invocamos imprimirDatos y queremos enviar el objeto que nos pide como par谩metro, simplemente se colocar谩 entre llaves los atributos del mismo sin colocar un nombre de referencia como data tal como lo hicimos en la definici贸n de la funci贸n.

Contribuci贸n creada por: Mart铆n 脕lvarez.

Aportes 26

Preguntas 4

Ordenar por:

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

o inicia sesi贸n.

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);
})();

Me encantaria ver un curso de React con typescript

(() => {
  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茅.

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

esto me esta ayudando a entender mejor Angular. Nico eres una eminencia eh aprendido lo que se es por ti mi familia habla de ti lol

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 馃槂