Typescript: Map properties from one object to another

Question

I have the following two types and object.

type TypeA = {
  a: number;
  b: number;
  c: number;
};
type TypeB = {
  d: number;
  e: number;
  c: number;
};
oldObject: { [key: string]: TypeA };

I want to map the properties from an object of type TypeA to an object of type TypeB. So far I've come up with the following.

const newObject: { [key: string]: TypeB } = {};

Object.entries(oldObject).forEach(([key, value]) => {
  newObject[key] = {
    d: value.a,
    e: value.b,
    c: value.c,
  } as TypeB;
});

Is there any way of doing this in typescript with something like a map or reduce function? I would much prefer to not have to assign {} to newObject at first.

There is no easy way to achieve that using map or reduce since they works only on arrays and not object. Converting you object to an array would be an anti-pattern and objects don't guarantee property order? according to ES5. — johannchopin
– johannchopin, Commented Aug 24, 2020 at 13:20

Aluan Haddad · Accepted Answer · 2020-08-25 06:21:02Z

You can use Object.fromEntries.

type TypeA = {
    a: number;
    b: number;
    c: number;
};
type TypeB = {
    d: number;
    e: number;
    c: number;
};

declare const oldObject: { [key: string]: TypeA };

const newObject: { [key: string]: TypeB } = Object.fromEntries(
    Object.entries(oldObject).map(([key, value]) => [
        key,
        {
            d: value.a,
            e: value.b,
            c: value.c
        }
    ])
);

Playground Link

To elaborate a little, Object.fromEntries is, as its name suggests, the inverse of Object.entries, taking an array of [key, value] elements and creating an object where the keys are mapped to their corresponding values.

Thus, we start with Object.entries as before but, instead of using forEach to populate our new object, we map over the array, transforming each [key, value] to [key, newValue] and pass the resulting array to Object.fromEntries.

Note that, as jcalz remarks, Object.fromEntries was introduced in ES2019. If your target runtime does not support ES2019, you will need to add a polyfill such as npm:object.fromentries and correspondingly specify "lib": ["ES2019"] or higher in your tsconfig.json

I've removed the type assertion as TypeB since it is both unnecessary and would more importantly would suppress errors like forgetting or misspelling a property declared by TypeB. Type inference is one of TypeScript's most important aspects.

Your intuition around using map and reduce is a very natural one. Not only have we used map here, but reduce was frequently used to achieve the same result as Object.fromEntries before the latter was introduced.

👍 You might also want to mention that the target environment needs to support ES2019 for this to work.

MoxxiManagarm · Accepted Answer · 2020-08-24 13:38:12Z

0

You could also use lodash's mapValue

const oldObject = {
  x: { a: 1, b: 2, c: 3 },
  y: { a: 11, b: 22, c: 33 },
}

function map(value) {
  return {
    d: value.a,
    e: value.b,
    f: value.c
  };
}

const newObject = mapValues(oldObject, map);

console.log(newObject);

answered Aug 24, 2020 at 13:38

MoxxiManagarm

9,2214 gold badges20 silver badges51 bronze badges

Collectives™ on Stack Overflow

Typescript: Map properties from one object to another

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related