Object destructuring with TypeScript

Here is how object destructuring is done in JavaScript.

const player = {
  firstName: 'Roger',
  lastName: 'Federer',
  age: 36,
};

const { firstName, lastName } = player;

console.log(firstName); // Roger
console.log(lastName); // Federer

What about if we want to apply types to this for use in TypeScript?

const { firstName, lastName }: { firstName: string; lastName: string } = player;

console.log(firstName); // Roger
console.log(lastName); // Federer

We can shorten and simplify this by creating a type or interface for what we are destructuring, which are the firstName and lastName in this case.

const player = {
  firstName: 'Roger',
  lastName: 'Federer',
  age: 36,
};

interface PlayerName {
  firstName: string;
  lastName: string;
}

const { firstName, lastName }: PlayerName = player;

console.log(firstName); // Roger
console.log(lastName); // Federer