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

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:

Copiarjs
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:

Copiarts
// 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ó.