Subscribe

Object destructuring in TypeScript

✍️

How to typescript a destructured object in JavaScript

23 Feb, 2022 · 2 min read

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 by 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, and let's connect!

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

Spread the knowledge with fellow developers on Twitter
Tweet this tip
Powered by Webmentions - Learn more

Read next 📖

The Record Utility Type in TypeScript

12 Mar, 2022 · 3 min read

The Record Utility Type in TypeScript

TypeScript Union type a deeper look

11 Mar, 2022 · 4 min read

TypeScript Union type a deeper look

Join 1372 devs and subscribe to my newsletter