Sometimes when you destructure object properties in TypeScript, you may want to define the type for the property you are destructuring.

TL;DR

// an object
const John = {
  age: 23,
  isAdult: true,
};

// get age property using destructuring syntax
// and set the type of age property
const { age }: { age: number } = John;

For example, let's say I have an object called John with some properties like age, isAdult like this,

// an object
const John = {
  age: 23,
  isAdult: true,
};

Now let's use the destructuring operator ({} curly braces) to get the age property from the John object like this,

// an object
const John = {
  age: 23,
  isAdult: true,
};

// get age property using destructuring syntax
const { age } = John;

To set or define a type on the age property we can use a colon : after the destructuring operator and then open a curly brace and then define the type of the age property inside that curly brace like this,

// an object
const John = {
  age: 23,
  isAdult: true,
};

// get age property using destructuring syntax
// and set the type of age property
const { age }: { age: number } = John;

See the above code live in codesandbox

There is one more way of defining the type using an interface like this,

// interface for age property
interface Age {
  age: number;
}

// an object
const John = {
  age: 23,
  isAdult: true,
};

// get age property using destructuring syntax
// and set the type using the interface "Age"
const { age }: Age = John;

That's it! 😃

Feel free to share if you found this useful 😃.

---