How to Deep Clone an Object & Preserve its Type with TypeScript ?

In TypeScript, deep cloning an object by preserving its type consists of retaining the same structure and type information as of original object.

Below are the approaches to Deep Clone an Object & Preserve its Type:

Using JSON.stringify and JSON.parse

In this approach, we are using the JSON.stringify and JSON.parse functions to perform a deep clone of the object. The DeepClone<T> type makes sure that the original object type structure is preserved during the cloning process, which is checked using instanceOf, and the boolean value is stored and printed from (preserveRes) variable.

Syntax:

JSON.stringify(value, replacer, space);
JSON.parse( string, function )

Example: The below example uses JSON.stringify and JSON.parse to deep-clone an object and preserve its type with TypeScript.

Javascript

type DeepClone<T> = T extends object ? {
    [K in keyof T]: DeepClone<T[K]> } : T;
function approach1Fn<T>(obj: T): DeepClone<T> {
    return JSON.parse(JSON.stringify(obj));
}
interface Person {
    name: string;
    age: number;
}
const person: Person = { name: 'GeeksforGeeks', age: 23 };
const res = approach1Fn(person);
console.log(res);
const preserveRes: boolean = res instanceof Object;
console.log('Type is preserved:', preserveRes);

Output:

{ name: 'GeeksforGeeks', age: 23 }
Type is preserved: true

Using Object.Assign function

In this approach, we are using the Object.assign() function for deep cloning by recursively traversing object properties and creating a new object. Type preservation is preserved through a subsequent type assertion (as T), as verified by checking the cloned result’s instance of an object (preserveRes instanceof Object).

Syntax:

Object.assign(target, ...sources);

Example: The below example uses Object.assign function to Deep Clone an Object and Preserve its Type with TypeScript.

Javascript

function approach2Fn<T>(obj: T): T {
    if (typeof obj !== 'object' || obj === null) {
        return obj;
    }
    const res: any = Array
        .isArray(obj) ? [] : {};
    for (const key in obj) {
        if (obj.hasOwnProperty(key)) {
            res[key] = approach2Fn(obj[key]);
        }
    }
    return Object.assign(res, obj) as T;
}
interface Person {
    name: string;
    website: string;
}
const per: Person =
{
    name: 'GeeksforGeeks',
    website: 'www.geeksforgeeks.org'
};
const res = approach2Fn(per);
console.log(res);
const preserveRes: boolean = res instanceof Object;
console.log('Type is preserved:', preserveRes);

Output:

{ name: 'GeeksforGeeks', website: 'www.geeeksforgeeks.org' }
Type is preserved: true