Probablemente sea una pregunta un poco tonta, pero solo soy un principiante y hay algo que estoy tratando de entender correctamente.
Cuando tenemos un código como este:
const { userName } = await getUserProfile({ userId });¿Qué está pasando exactamente aquí? ¿Estamos desestructurando el nombre de usuario del objeto getUserProfile para poder acceder a esa propiedad? ¿Y userId significa que la función getUserProfile tiene un parámetro que es un objeto que tiene una propiedad userId?
Lo siento, si esta es una pregunta demasiado principiante, pero realmente agradecería que alguien tuviera el tiempo de explicarme esto, por favor.
Yo diría que la función hace algo como esto:
interface Options { userId: number; } interface ReturnItem { userName: string; } const getUserProfile = async (options: Options): Promise<ReturnItem> => { // make some request with the id const response = await axios.get(`/look/up/my/user/${options.userId}`); return response.data; }La desestructuración se basa en los tipos definidos en la función, por lo que en lugar de recuperar un objeto, simplemente está extrayendo el elemento del objeto devuelto, ya que los tipos definen que es lo que puede esperar recibir.
En lugar de hacer lo siguiente:
const myId = 1; const myResult = await getUserProfile({userId: myId}); console.log(myResult.userName);tu puedes hacer:
const userId = 1; const {userName} = await getUserProfile({userId}); console.log(userName);Otro ejemplo:
const myReturnData = { userName: 'Bjork' };ahora se puede acceder a userName de las siguientes maneras:
console.log(myReturnData.userName);o
const {userName} = myReturnData; console.log(userName);La desestructuración es tomar esos valores en su objeto y asignarlos a variables.
Un poco mas lejos..
const myReturnData = { userName: 'Bjork', coolnessFactor: 10000 }; const {userName, coolnessFactor} = myReturnData; console.log('My User is: ', userName); console.log('and my Coolnessfactor is: ', coolnessFactor);