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:
- Extend the Node.js Global (globalThis) object in TypeScript
- Declare and Type a nested Object in TypeScript
- Initialize a typed, empty Object using an Interface in TS
My name’s Christopher Gonzalez. I graduated from HUST two years ago, and my major is IT. So I’m here to assist you in learning programming languages. If you have any questions about Python, JavaScript, TypeScript, Node.js, React.js, let’s contact me. I will back you up.
Name of the university: HUST
Major: IT
Programming Languages: Python, JavaScript, TypeScript, Node.js, React.js