Imagen destacada del artículo Desestructuración (destructuring) de parámetros en funciones con typescript.

Desestructuración (destructuring) de parámetros en funciones con typescript.

typescript svg javascript svg
actualizado: 05 / 01 / 2022

Introducción al destructuring

Gracias a la desestructuración podemos "desempacar" en diferentes variables los parametrós que le pasamos a una función, en JavaScript vanilla sería algo como esto:

js
const animal = {
tipo: "perro",
peso: 1,
edad: 0,
nacimiento: new Date(),
};
// sin desestruturación
const logAnimal = animal => {
console.log(animal.tipo, animal.peso, animal.edad, animal.nacimiento);
};
// con desestructuración
const logAnimal = ({ tipo, peso, edad, nacimiento }) => {
console.log(tipo, peso, edad, nacimiento);
};

Cómo hacer un destructuring de parámetros tipado en una función con typescript

Una de las mayores ventajas que ofrece typescript es el tipado fuerte que permite detectar mucho más fácil cualquier error en nuestro código.

En el caso de las funciones podemos especificar el tipo de parámetros que debe recibir y aplicando desestructuración también podemos tiparla de la siguiente forma:

ts
// obteto animal
const logAnimalWithTS = ({
tipo,
peso,
edad,
nacimiento,
}: {
tipo: string;
peso: number;
edad: number;
nacimiento: Date;
}): void => {
console.log(tipo, peso, edad, nacimiento);
};

Se hace una desestructuración igual que con javascript puro seguido de dos puntos(:) en el que especifícamos el tipo de cada parametró.

Nota importante:

después de hacer el destructuring especifícamos el tipo void ya que esta función no retornará ningún valor.

Artículos relacionados:
Cómo poner comentarios en javascript

Imagen destacada del artículo Cómo poner comentarios en javascript

Cómo crear elementos html con el método .createElement de javascript

Imagen destacada del artículo Cómo crear elementos html con el método .createElement de javascript

Cómo ocultar un div con javascript

Imagen destacada del artículo Cómo ocultar un div con javascript

Verificar si una expresión es un palindromo con javascript

Imagen destacada del artículo Verificar si una expresión es un palindromo con javascript

Cómo filtrar elementos de un array con el método .filter()

Imagen destacada del artículo Cómo filtrar elementos de un array con el método .filter()

Cómo hacer un menú hamburguesa con html, css y javascript

Imagen destacada del artículo Cómo hacer un menú hamburguesa con html, css y javascript

Cambiar estilos css usando javascript

Imagen destacada del artículo Cambiar estilos css usando javascript

¿Cómo recorrer un array en javascript?

Imagen destacada del artículo ¿Cómo recorrer un array en javascript?