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
18H
45M
3S

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 19

Preguntas 5

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

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

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

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

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 😃