Typescript error when changing property of object dynamically

Question

I'm having trouble when I try to update an Object's property based on a dynamic variable. I've checked a few more answers on stackoverflow but couldn't manage to find a solution.

export interface Bikes {
  totals: Array<number>;
}

interface Products {
  cars:  Cars;
  bikes:  Bikes;
}

export interface RawData {
    products: Products
}

demo( data: RawData ) {
  // data.products contains both "cars" and "bikes" properties.
  for (var type in data.products) { 
    for (var product in data.products[type].totals) {// <-- error here
                        -------------
     ....
   }
}

Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'Products'. No index signature with a parameter of type 'string' was found on type 'Products'.

I've also tried using:

export interface RawData {
    products: keyof Products
}

And then the error appears on data.products[type].totals

Property 'bikes' does not exist on type 'string'.

What are you trying to achieve with the for-in loop? And what is the definition of the Cars and Bikes types? — T.J. Crowder
– T.J. Crowder, Commented Apr 22, 2021 at 16:32
I've updated the question. It loops through the different product types coming from the JSON data. (bikes and cars) — Alvaro
– Alvaro, Commented Apr 22, 2021 at 16:37

captain-yossarian from Ukraine · Accepted Answer · 2021-04-22 17:05:41Z

2

In your case, variable type is infered to string.

TS disallows you to use string type as index of RawData['products'] type.

If you want to assure TS that you can do it, you have two ways:

1) Make type assertion

  function demo(data: RawData) {
    for (const type in data.products) {
       // explicitly define type for `type` varable
      for (const product in data.products[type as keyof RawData['products']]) { // ok

      }
    }
  }

2) Make Products indexable

  interface Products {
    cars: Cars;
    bikes: Bikes;
    [prop: string]: Cars | Bikes
  }

UPDATE

  interface Bikes {
    totals: Array<number>;
  }

  type Mix = { foo: 'a' };

  type Products = {
    cars: Cars;
    bikes: Bikes;
    mix?: Mix;
  }
  type Values<T> = T[keyof T]

  type MakeIndexed<T> = T & { [prop: string]: Values<T> }


  interface RawData {
    products: MakeIndexed<Products>
  }

  function demo(data: RawData) {
    for (const type in data.products) {
      for (const product in data.products[type]) { // ok

      }
    }
  }

edited Apr 22, 2021 at 17:05

answered Apr 22, 2021 at 16:45

captain-yossarian from Ukraine

33.5k5 gold badges41 silver badges78 bronze badges

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

3 Comments

Alvaro Over a year ago

If I have an optional property inside the Products interface, such as mix:? Mix then adding your last line ([prop: string]: Cars | Bikes) shows me this error Property 'mix' of type 'Cars | Bikes | undefined' is not assignable to string index type 'Cars | Bikes'.ts

Alvaro Over a year ago

Cannot find name 'Values'.ts(2304) It seems Values is not defined on your example.

captain-yossarian from Ukraine Over a year ago

You should not look for Values.ts. In my example, Values - is just utility type

Collectives™ on Stack Overflow

Typescript error when changing property of object dynamically

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related