How to Destructure Typed Objects in TypeScript

We’re probably familiar with object destructuring in JavaScript, as it’s been a useful tool since ES6. But how can we perform object destructuring with types while using TypeScript?

Suppose we have a response object from an API call that contains this data.

{
   gender: 'male',
   age: 6
}

We can perform basic object destructuring here.

const { gender, age } = response;

But if we’re in TypeScript, we’d want to type the variables. This is how we do that concisely.

const { gender, age }: { gender: string; age: number } = response;

However, ideally, we’d define an interface.

interface Person {
  gender: string
  age: number
}
const { gender, age }: Person = response;
const person: Person = response; // person.gender, person.age