DEV Community

Uzeyr OZ
Uzeyr OZ

Posted on β€’ Edited on

1

Populating Data Objects for TypeScript

TypeScript provides a powerful way to model and manipulate data objects, allowing you to write clean and maintainable code. One of the key features of TypeScript is its ability to define interfaces, which can be used to enforce a specific structure for data objects. In this article, we will explore how to use TypeScript to map and populate data objects, using the Object.assign() method and the spread operator.

Mapping Data Objects

Mapping data objects involves taking one object and creating a new object with a different structure. This can be useful when working with APIs that return data in a format that is different from what you need for your application. In TypeScript, you can use the Object.assign() method to map data objects.

The Object.assign() method takes two or more objects as arguments, and copies the properties from the source objects to the target object. In the example below, we have a source object called person with properties firstName and lastName. We use Object.assign() to create a new object called personMapped with properties name and surname, which are mapped from the firstName and lastName properties of the person object.


interface Person {
  firstName: string;
  lastName: string;
}

const person: Person = {
  firstName: 'John',
  lastName: 'Doe',
};

const personMapped = Object.assign({}, person, {
  name: person.firstName,
  surname: person.lastName,
});

console.log(personMapped); // { name: 'John', surname: 'Doe' }

Enter fullscreen mode Exit fullscreen mode

Populating Data Objects

Populating data objects involves taking one object and adding new properties to it. This can be useful when working with data that is spread across multiple objects, and you need to combine it into a single object. In TypeScript, you can use the spread operator to populate data objects.

The spread operator is represented by three dots (...), and is used to spread the properties of an object into a new object. In the example below, we have a source object called person with properties firstName and lastName. We also have a second object called address with properties street and city. We use the spread operator to add the properties of the address object to the person object, creating a new object called personPopulated.

interface Person {
  firstName: string;
  lastName: string;
  birthDay: Date;
}

interface Address {
  street: string;
  city: string;
}

const person: Person = {
  firstName: 'John',
  lastName: 'Doe',
};

const address: Address = {
  street: 'Main St',
  city: 'Anytown',
};


const personPopulated = { ...person, ...address };

console.log(personPopulated); // { firstName: 'John', lastName: 'Doe', street: 'Main St', city: 'Anytown' }

Enter fullscreen mode Exit fullscreen mode

In this article, we have seen how to use TypeScript to map and populate data objects using Object.assign() method

πŸŒŽπŸ™‚πŸ˜Ž Let's Connect!
My Twitter: @muzeyrozcan
My Substack (here I will publish more in-depth articles)

Heroku

Deliver your unique apps, your own way.

Heroku tackles the toil β€” patching and upgrading, 24/7 ops and security, build systems, failovers, and more. Stay focused on building great data-driven applications.

Learn More

Top comments (0)

Image of PulumiUP 2025

From Cloud to Platforms: What Top Engineers Are Doing Differently

Hear insights from industry leaders about the current state and future of cloud and IaC, platform engineering, and security.

Save Your Spot

πŸ‘‹ Kindness is contagious

Explore a trove of insights in this engaging article, celebrated within our welcoming DEV Community. Developers from every background are invited to join and enhance our shared wisdom.

A genuine "thank you" can truly uplift someone’s day. Feel free to express your gratitude in the comments below!

On DEV, our collective exchange of knowledge lightens the road ahead and strengthens our community bonds. Found something valuable here? A small thank you to the author can make a big difference.

Okay