How to Deep Merge Two Objects in TypeScript ?

Merging two objects in TypeScript is a common task, but when dealing with complex nested structures, a deep merge becomes necessary. A deep merge combines the properties of two or more objects, including nested objects, creating a new object with merged values. In this article, we will explore various approaches to deep merging objects in TypeScript, along with their syntax and examples.

Deep Merge Two Objects using Recursive Function

This approach involves recursively traversing the objects and merging their properties. When encountering nested objects, the function calls itself to perform a deep merge.

Syntax:

function deepMerge<T>(target: T, ...sources: Partial<T>[]): T {
    // Implementation
}

Example: Recursive Function Approach

In this example, we have two objects obj1 and obj2 with nested properties. We use a recursive function deepMerge to merge these objects deeply.

Javascript

function isObject(item: any) {
    return (item && typeof item === 'object' && !Array.isArray(item));
}

function deepMerge(target: any, ...sources: any[]): any {
    if (!sources.length) return target;
    const source = sources.shift();

    if (isObject(target) && isObject(source)) {
        for (const key in source) {
            if (isObject(source[key])) {
                if (!target[key]) Object.assign(target, { [key]: {} });
                deepMerge(target[key], source[key]);
            } else {
                Object.assign(target, { [key]: source[key] });
            }
        }
    }
    return deepMerge(target, ...sources);
}

// Driver code
const obj1 = { a: { b: 1 } };
const obj2 = { a: { c: 2 } };

const merged = deepMerge({}, obj1, obj2);

console.log(merged); // Output: { a: { b: 1, c: 2 } }

Output:

{ a: { b: 1, c: 2 } }

Deep Merge Two Objects using Spread Operator

The spread operator (…) can be used to shallow copy the properties of objects. By combining spread operators with recursion, we can achieve deep merging of objects.

Syntax:

function deepMerge<T>(target: T, ...sources: Partial<T>[]): T {
    // Implementation
}

Example: Spread Operator Approach

In this example, we demonstrate the spread operator approach to deep merge two objects obj1 and obj2.

Javascript

function isObject(item: any): boolean {
    return item !== null && typeof item === 'object' && !Array.isArray(item);
}

function deepMerge<T extends object>(target: T, ...sources: Array<Partial<T>>): T {
    if (!sources.length) return target;
    const source = sources.shift();

    if (isObject(target) && isObject(source)) {
        for (const key in source) {
            if (Object.prototype.hasOwnProperty.call(source, key)) {
                const sourceValue = source[key];
                if (isObject(sourceValue) && isObject(target[key])) {
                    target[key] = deepMerge(target[key] as any, sourceValue as any);
                } else {
                    // Use type assertion to handle the possibility of undefined
                    (target as any)[key] = sourceValue;
                }
            }
        }
    }
    return deepMerge(target, ...sources);
}

// Driver code
const obj1 = { a: { b: 1 } };
const obj2 = { a: { c: 2 } };

const merged = deepMerge({}, obj1, obj2);

console.log(merged);

Output

{ a: { b: 1, c: 2 } }

Deep Merge Two Objects using Libraries like Lodash

Lodash provides a merge function that performs deep merging of objects. It handles edge cases and complexities efficiently, making it a reliable choice for deep merging.

Syntax:

import _ from 'lodash';
const mergedObject = _.merge(object1, object2);

Example: Using Libraries like Lodash

Here, we showcase the usage of Lodash’s merge function to deep merge two objects obj1 and obj2.

Javascript

import _ from 'lodash';

const obj1 = { a: { b: 1 } };
const obj2 = { a: { c: 2 } };

const merged = _.merge(obj1, obj2);

console.log(merged); // Output: { a: { b: 1, c: 2 } }

Output:

{ a: { b: 1, c: 2 } }