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 filtrar elementos de un array con filter javascript

Imagen destacada del artículo Cómo filtrar elementos de un array con filter javascript

Cómo eliminar elementos repetidos de un arreglo en JavaScript

Imagen destacada del artículo Cómo eliminar elementos repetidos de un arreglo en JavaScript

Cómo insertar Javascript en HTML

Imagen destacada del artículo Cómo insertar Javascript en HTML

Eliminar el primer y ultimo carácter de una cadena en javascript

Imagen destacada del artículo Eliminar el primer y ultimo carácter de una cadena en javascript

Cómo eliminar elementos de un arreglo en JavaScript

Imagen destacada del artículo Cómo eliminar elementos de un arreglo en JavaScript

Gatsby JS - introducción, ventajas y usos

Imagen destacada del artículo Gatsby JS - introducción, ventajas y usos

Introducción a Nextjs

Imagen destacada del artículo Introducción a Nextjs

Calcular cuantos días hay entre dos fechas con javascript

Imagen destacada del artículo Calcular cuantos días hay entre dos fechas con javascript