134

I'd like to know the best way to do this, say I have two objects

var objectA = {
    propertyA: 1,
    propertyB: 2
    ...
    propertyM: 13
}

var objectB = {
    propertyN: 14,
    propertyO: 15
    ...
    propertyZ: 26
}

If objectC is created by

var objectC = Object.assign(objectA, objectB);

How can I declare/describe objectC, so the compiler/IDE knows that it has the properties of both objectA and objectB?

I'd like to find a way without the need of defining interfaces for objectA and objectB. I don't want to write declaration and definition/evaluation for the same property twice. This redundancy is significant if I have too many properties on an object.

(Is there an operator that can extract the interface/type of an existing object?)

Is it possible?

6 Answers 6

254

Seems like this should do the trick:

var objectA = {
    propertyA: 1,
    propertyB: 2,
    .
    . // more properties here
    .
    propertyM: 13
};

var objectB = {
    propertyN: 14,
    propertyO: 15,
    .
    . // more properties here
    .
    propertyZ: 26
};

var objectC = {...objectA, ...objectB}; // this is the answer

var a = objectC.propertyA;

var n = objectC.propertyN;

Based on this article: https://blog.mariusschulz.com/2016/12/23/typescript-2-1-object-rest-and-spread


In addition, the order of the variables in the decomposition matters. Consider the following:

var objectA = {
    propertyA: 1,
    propertyB: 2, // same property exists in objectB
    propertyC: 3
};

var objectB = {
    propertyX: 'a',
    propertyB: 'b', // same property exists in objectA
    propertyZ: 'c'
};

// objectB will override existing properties, with the same name,
// from the decomposition of objectA
var objectC = {...objectA, ...objectB}; 

// result: 'b'
console.log(objectC.propertyB); 

// objectA will override existing properties, with the same name,
// from the decomposition of objectB
var objectD = {...objectB, ...objectA}; 

// result: '2'
console.log(objectD.propertyB); 
5
  • 7
    just to improve the answer: this line does the trick: var objectC = {...objectA, ...objectB};
    – Amirreza
    Aug 29, 2018 at 6:54
  • I want to update property of objectA if same key exist in both object. Means if key is same then it should take property of objectB. How is it possible? Mar 30, 2019 at 12:18
  • Read the comments in my answer. Basically it constructs properties from left to right, where each new information overrides the existing one: var objectC = {...objectA, ...objectB};. Properties form objectB will override properties that were already assigned from objectA, if properties have the same name.
    – Alkasai
    Mar 30, 2019 at 18:34
  • This works, therefore answers OP, however my concern is there is no type associated now to objectD or objectC , when you try to explicitly type it to something (assume there is such a type), it wont work. Is there type safe way of doing this ? Feb 22, 2020 at 11:47
  • @SrivathsaHarishVenkataramana the types are inferred from the assignment. So objectC will have propertyB: string, while objectD will infer it as propertyB: number. You could manually type both C & D: type ABC = { propertyA: number; propertyB: string | number; propertyC: number; propertyX: string; propertyZ: string; } or just one of them by setting propertyB to string or to number.
    – Alkasai
    Feb 22, 2020 at 20:06
16

(Is there an operator that can extract the interface/type of an existing object? Is it possible?)

You should go for typeof.

type typeA = typeof objectA;
type typeB = typeof objectB;

To get them merged you can use intersection operation as basarat already pointed out.

type typeC = typeA & typeB
12

so the compiler/IDE knows that it has the properties of both objectA and objectB?

Use an intersection type + generics. E.g. from here

/**
 * Quick and dirty shallow extend
 */
export function extend<A>(a: A): A;
export function extend<A, B>(a: A, b: B): A & B;
export function extend<A, B, C>(a: A, b: B, c: C): A & B & C;
export function extend<A, B, C, D>(a: A, b: B, c: C, d: D): A & B & C & D;
export function extend(...args: any[]): any {
    const newObj = {};
    for (const obj of args) {
        for (const key in obj) {
            //copy all the fields
            newObj[key] = obj[key];
        }
    }
    return newObj;
};

More

Both are mentioned here : https://basarat.gitbooks.io/typescript/content/docs/types/type-system.html

2
  • Thanks. This seems to work. However the extend() function is defined in a 3rd party library, is there any way to overwrite this specific definition for extend() in its d.ts file? (I am using underscore _.extend() ). May 5, 2016 at 7:50
  • Yup. Just modify underscore.d.ts
    – basarat
    May 5, 2016 at 23:35
11

try this..

const person = { name: 'TRilok', gender: 'Male' };
const tools = { computer: 'Mac', editor: 'Atom' };
const attributes = { handsomeness: 'Extreme', hair: 'Brown', eyes: 'Blue' };

const summary = {...person, ...tools, ...attributes};
7

Use Typescript spread operator it transpile to Javascript Object.assign()

If you need deep tree object merging you could use changing function of best-global package

0
4

Lodash has an "extend" function that combines objects and lets Typescirpt know that the new object has the type you'd expect.

const a = { one: 1, two: 2 };
const b = { three: 3, four: 4 };
const c = lodash.extend(a, b);
// c: { one: 1, two: 2, three: 3, four: 4 }
1
  • 1
    Nice answer, thank you. "extend" of Lodash is better than merging via spread operator, because it takes properties (getters) into account! May 8, 2022 at 10:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.