Encountering a Typescript issue while dynamically modifying an object's property

Question

Encountering a Typescript issue while dynamically modifying an object's property

Having difficulties updating an Object's property based on a dynamic variable. Even after searching for answers on stackoverflow, I haven't been able 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
                        -------------
     ....
   }
}

An issue arises - "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'."

Attempted using:

export interface RawData {
    products: keyof Products
}

But then received an error on data.products[type].totals

Error message: "Property 'bikes' does not exist on type 'string'."

typescript types

Answer 1

Answer №1

The variable type in your situation is deduced to be of type string.

TypeScript does not allow you to use the string type as an index for the RawData['products'] type.

If you want to convince TypeScript that it is possible, you have two options:

1) Employ type assertion

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

    }
  }
}

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]) { // okay

    }
  }
}

Answer 2

The variable type in your situation is deduced to be of type string.

TypeScript does not allow you to use the string type as an index for the RawData['products'] type.

If you want to convince TypeScript that it is possible, you have two options:

1) Employ type assertion

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

    }
  }
}

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]) { // okay

    }
  }
}

Encountering a Typescript issue while dynamically modifying an object's property

Answer №1

Similar questions

I'm experiencing issues with my GAS script when trying to generate events, as it is unable to

Angular 2 Ahead-of-Time compiler: all clear on the error front, yet a nagging feeling of

A guide on displaying data from objects containing arrays in React using TypeScript

What is the process of programmatically sorting a column in a Material UI DataGrid?

Deployment of Typescript.js files in Angular 2

Exploring the capabilities of Web MIDI in the context of Angular

error TS5023: Compiler option 'enableIvy' is not recognized

Can the string literal type be implemented in an object interface?

The utilization of `ngSwitch` in Angular for managing and displaying

Transform ECMAScript Observable / Zen Observable into RXJS Observable

Enhance your TypeScript skills by leveraging types on the call() method in redux-saga

How can you avoid inspecting webpack internal code when debugging in Visual Studio Code with React Typescript or NextJS?

Variables in Angular DI become undefined when a method is called through a passed function reference

Changing the names of properties within a intricate JSON structure

Sending Functions as Props in React Using Typescript from a Parent Component to a Child Component

Jest ran into a surprising token related to NUXT typescript

Instructions for setting 0 as a valid value in Html code and displaying it

Unable to set a value to a TypeScript object mapping

Are angular route guards reliable for ensuring security?

The service remains operational while the button's status undergoes a change