Typescript - Update object properties dynamically with Object.entries

Question

I want to implement a function that loops over the properties of an object and applies updates to another object of the same type.

interface Car {
  tires: number;
  name: string;
}

function updateCar(car: Car, updates: Partial<Car>) {
  Object.entries(updates).forEach(([key, value]) => {
    car[key] = value;
  })
}

The issue here is that there is an error

No index signature with a parameter of type 'string' was found on type 'Car'

when casting the key to keyof Car it works, but as soon as using "noImplicitAny": true there is again an error

Type 'string | number' is not assignable to type 'never'

Is there a way to solve this issue in a type-safe matter. Casting the car to any would work but I'd like to avoid it.

Many thanks Bene

Partial<Car> would allow me to pass {tires: 4, name: undefined}. Do you want that? — Aluan Haddad
– Aluan Haddad, Commented Aug 25, 2020 at 12:20
@AluanHaddad - the question is just targeted to the typing problem. I know that this method has some caveats and some other checks would be necessary but this is not the scope of my question :) — Bene
– Bene, Commented Aug 25, 2020 at 12:24
Yes but I am trying to point out that they are related. If you just want a way to do it that won't complain, use Object.assign(car, updates) — Aluan Haddad
– Aluan Haddad, Commented Aug 25, 2020 at 12:27

spender · Accepted Answer · 2020-08-25 10:01:13Z

18

This question inspired me to revisit a similar problem I ran into.

While not a direct analog of your problem (i.e. this is a pure function that returns a new object rather than modifying arguments supplied by the caller), here's an update function that retains type-safety by using object-spread instead of the Object.entries() function to do its work:

function updateFromPartial<T>(obj: T, updates: Partial<T>):T { 
    return {...obj, ...updates}; 
}

answered Aug 25, 2020 at 10:01

spender

121k36 gold badges245 silver badges369 bronze badges

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

3 Comments

Mingwei Samuel Over a year ago

Note that this returns a new object rather than updating in-place

Laurent Over a year ago

Great! I wasn't aware Partial exist :)

messinismarios Over a year ago

Thank you for this, spent days without figuring something out.

fjc · Accepted Answer · 2020-08-25 10:14:26Z

4

This is about as typesafe as I could get it. The only thing left not properly typed is car[key]. This is clearly not a perfect solution.

interface Car {
  tires: number;
  name: string;
}

function updateCar(car: Car, updates: Partial<Car>) {
    for (const update in updates) {
        const key = update as keyof Car;
        (car[key] as any) = updates[key];
    }
}

answered Aug 25, 2020 at 10:14

fjc

5,85521 silver badges38 bronze badges

Comments

Rafael Neto · Accepted Answer · 2022-09-08 12:29:22Z

4

That function already exists. Why not just use?

Object.assign(car, updates);

The Object.assign() method copies all enumerable own properties from one or more source objects to a target object. It returns the modified target object. MDN

answered Sep 8, 2022 at 12:29

Rafael Neto

1,32014 silver badges16 bronze badges

1 Comment

cglacet Over a year ago

It seems like Object.assign is not type checked, which means you can affect anything to car. For example if you Car type has a color: string but you update object comes with {color: null} this line of code will not raise any error (eventhough it should).

Daniel · Accepted Answer · 2024-07-28 08:23:27Z

0

You can use Object.assign() as suggested in this answer but add typing to achieve OPs goal:

function assignFromPartial<T extends {}>(target: T, ...sources: Partial<T>[]) {
  return Object.assign(target, ...sources) as T;
}

answered Jul 28, 2024 at 8:23

Daniel

8279 silver badges26 bronze badges

Collectives™ on Stack Overflow

Typescript - Update object properties dynamically with Object.entries

4 Answers 4

3 Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related