← flaviocopes.com

Object destructuring with types in TypeScript

Published May 11 2020

Psssst! The 2023 WEB DEVELOPMENT BOOTCAMP is starting on FEBRUARY 01, 2023! SIGNUPS ARE NOW OPEN to this 10-weeks cohort course. Learn the fundamentals, HTML, CSS, JS, Tailwind, React, Next.js and much more! ✨

I was using TypeScript in Deno to build a sample project and I had to destructure an object. I am familiar with TypeScript basics but sometimes I hit a problem.

Object destructuring was one of those.

I wanted to do

const { name, age } = body.value

I tried adding the string and number types like this:

const { name: string, age: number } = body.value

But this didn’t work. It apparently worked, but in reality this is assigning the name property to the string variable, and the age property value to the number variable.

The correct syntax is this:

const { name, age }: { name: string; age: number } = body.value

The best way to approach this would be to create a type or interface for that data:

interface Dog {
  name: string
  age: number

Then you can write the above in this way, which is shorter:

const dog: Dog = body.value

I write books for developers 👇🏼

© 2023 Flavio Copes Flavio Copes made in Italy 🇮🇹 using Notion to Site Notion to Site