Guidelines for using Object.assign() in TypeScript

Using Object.assign() in TypeScript

Suppose you are looking for a method to merge multiple objects into one object. This tutorial will show you the instructions on using Object.assign() in TypeScript. Check out the information below for a better understanding.

Using Object.assign() in TypeScript

The Object.assign() method allows us to work with TypeScript objects. This method copies the values ​​of all enumerable properties from one or more source objects to a target object and returns that target object.

Syntax:

Object.assign(target, ...sources)

Parameters:

  • target: Target object
  • sources: Source objects

To illustrate, here is an example for you:

const targetObject = { name: "Duong", age: 22 };
const sourceObject = { gender: "Male", nationality: "VietNam" };
const result = Object.assign(targetObject, sourceObject);

console.log(result);

Output:

{ name: "Duong", age: 22, gender: "Male", nationality: "VietNam" }

In the above example, we merge two objects. It can be understood that all properties of object ‘sourceObject ‘ are copied into object ‘targetObject‘.

The source object’s properties will overwrite the target object’s properties if they have the same key. Similarly, the following source properties will override the previous source properties.

const targetObject = { name: "Duong", age: 22 };
const sourceObject = { name: "Huy", nationality: "VietNam" };
const result = Object.assign(targetObject, sourceObject);

console.log(result);

Output:

{ name: "Huy", age: 22, nationality: "VietNam" }

As you can see, the ‘name’ property in the target object has been overwritten by the ‘name‘ property in the source object.

In case there are multiple source objects that all have a ‘name‘ attribute, the result will have a ‘name‘ property of the last source object. Here is an example:

const targetObject = { name: "Duong", age: 22 };
const firstSourceObj = { name: "Huy" };
const secondSourceObj = { name: "Long", nationality: "VietNam" };
const result = Object.assign(targetObject, firstSourceObj, secondSourceObj);

console.log(result);

Output:

{ name: "Long", age: 22, nationality: "VietNam" }

The spread syntax(…) is an alternative to the Object.assign() method. The results will be the same, so you might as well consider this approach.

const targetObject = { name: "Duong", age: 22 };
const sourceObject = { gender: "Male", nationality: "VietNam" };

// Using the spread syntax in stead of Object.assign
const result = { ...targetObject, ...sourceObject };
console.log(result);

Output:

{ name: "Duong", age: 22, gender: "Male", nationality: "VietNam" }

Summary

In conclusion, we just showed you the instructions on using Object.assign() in TypeScript. You can try practicing in your project and see the results to get a better understanding of how this method works. Hopefully, the information we provide is helpful to you. See you in the following tutorial.

Maybe you are interested:

Leave a Reply

Your email address will not be published. Required fields are marked *