How to add dynamic values from one object to another object of different type in typescript

Question

interface type1 {
    key1: string;
    key2: string;
    key3?: type3;
}

interface type2 {
    key1: string;
    key2: string;
    key5: string;
    key6: number;
}

interface type3 { 
    key5?: string;
    key6?: number;
}

const obj1: type1 = <type1>{};

const obj2: type2 = {
    key1: 'hi',
    key2: 'hello',
    key5: 'Hola',
    key6: 123
};

const obj3: type3 = <type3>{};

const array1: (keyof type2)[] = ['key1', 'key2'];
const array2: (keyof type3)[] = ['key5', 'key6'];


array1.forEach((key: keyof type2) => {
    obj1[key] = obj2[key]; /* Error occurred while adding value */
});

array2.forEach((key: keyof type3) => {
    obj3[key] = obj2[key]; /* Error occurred while adding value */
});

obj1.key3 = obj3;

console.log(obj1);

I have 3 objects of different types but some keys are common in objects. I want to add values dynamically from one object to another. I've added the code what I tried till now.

Is there any way to achieve it. Practically I've more keys than what I've put on the example. assigning them one by one will be huge and inefficient.

Thanks in advance.

@HaSnenTai I don't want to use type any in my code. With type any I can assign the values directly without error. — Shubham
– Shubham, Commented Dec 4, 2019 at 7:40
So you want to copy only the common properties from a source to a target object if I interpret the example correctly. Also, you want get rid of array1, array2 and don't manually define those keys? — ford04
– ford04, Commented Dec 4, 2019 at 9:44
@ford04 What you interpret it correct, only one correction I want to use array1 and array2 to define what property I want to retrieve. Type of these arrays can be changed in order to achieve the goal. — Shubham
– Shubham, Commented Dec 4, 2019 at 10:26

ford04 · Accepted Answer · 2019-12-04 14:45:41Z

1

Here is a workable solution with minimal adjustments to your code (Playground):

const obj1: type1 = {} as type1;
const obj2: type2 = { key1: 'hi', key2: 'hello', key5: 'Hola', key6: 123 };
const array1 = ['key1', 'key2'] as const

array1.forEach(<K extends keyof (type1 | type2)>(key: K) => {
  obj1[key] = obj2[key]; 
});

// same with 2nd case (obj2, obj3, array2)

We can define array1 and array2 as tuples with const assertion, no need to annotate an explicit type.

In order to get the computed property access with both obj1 and obj2 to work, the key has to be declared as generic type parameter K with constraint K extends keyof (type1 | type2) (means, restrict to all common properties of type1 and type2). See this answer for an explanation of issues with computed property access with union key types and why generics are necessary.

Object spread is a second alternative, where the types get a bit easier (Playground):

const obj1: type1 = {} as type1;
const obj2: type2 = { key1: 'hi', key2: 'hello', key5: 'Hola', key6: 123 };

const obj1New = {
  ...obj1,
  ...(['key1', 'key2'] as const).reduce((acc, cur) =>
    ({ ...acc, ...{ [cur]: obj2[cur] } }), {} as type1),
}

// same with 2nd case (obj2, obj3, array2)

answered Dec 4, 2019 at 14:45

ford04

75.8k26 gold badges219 silver badges176 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Shubham Over a year ago

Thanks a lot. You're a life saver :).

MEDZ · Accepted Answer · 2019-12-04 09:13:48Z

0

You can try in operator to check if the key exists inside an object before assignment:

array1.forEach((key: keyof type2) => {
    if(key in obj1)
       obj1[key] = obj2[key]; /* Error occurred while adding value */
});

array2.forEach((key: keyof type3) => {
    if(key in obj3)
       obj3[key] = obj2[key]; /* Error occurred while adding value */
});

edited Dec 4, 2019 at 9:13

answered Dec 4, 2019 at 8:07

MEDZ

2,2952 gold badges17 silver badges19 bronze badges

1 Comment

Shubham Over a year ago

Not fixing the issue.

Collectives™ on Stack Overflow

How to add dynamic values from one object to another object of different type in typescript

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related