Object destructuring in TypeScript

The cool part about TypeScript is that we can define types for certain variables. However, there is a scenario that might prove a bit difficult.

And this is destructuring an object.

Let’s take the following example:

const user = { firstname: 'Chris', lastname: 'Bongers', age: 32 };

const { firstname, age } = user;

By using this destructuring, we extract specific properties from an object.

But how do we now define the types for this destructured object?

TypeScript casting a destructured object type

You might immediately think the following will work:

const { firstname: string, age: number } = user;

But this assigns the firstname variable to be string and the age variable to be called number.

And when we introduce two of the same type, we are hit with an error since we are redefining a variable.

This is because when we destructure an object, we can rename the properties like so:

const { firstname: userFirstname, age: userAge } = user;

To define these types, we have to assign them after the destructuring.

Which would look like this:

const { firstname, age }: { firstname: string, age: number } = user;

Do note you can still rename the variables, and we must still use the types for the original names.

const {
  firstname: userFirstname,
  age: userAge,
}: { firstname: string, age: number } = user;

We can make this a bit nicer using TypeScript interfaces.

interface User {
  firstname: string;
  age: number;
}
const { firstname, age }: User = user;

That looks way nicer, right?

And there you go, the correct way to typecast a destructured object in TypeScript.

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter