Things are SIMPLE in Javascript:

interface Person {
  id: number
  red: number
  green: number
  blue: number
  buckets: Array<BucketType>
  // Does the index signature go here? What does it look like?
  // I haven't seen any "standard" way of doing this
}

interface BucketType {
  color: string,
  weight: number
}

const personA = {
  id: 123,
  red: 4,
  green: 5,
  blue: 6,
  buckets: [
    {
      color: 'Blue',
      weight: 4
    }
  ]
}
const personB = {
  id: 456,
  red: 7,
  green: 8,
  blue: 9,
  buckets: [
    {
      color: 'Red',
      weight: 10
    }
  ]
}
const people = [ personA, personB ]

for (let person of people) {
  for (let bucket of person.buckets) {
    console.log(bucket.weight) // 4, then 10
    console.log(bucket.color)  // 'Blue', then 'Red'
    bucket.weight += person[bucket.color.toLowerCase()] // ERROR: NO INDEX SIGNATURE!!!! (Typescript)
    console.log(bucket.weight) // In pure Javascript, this logs '10', then '17'
  }

}

Honestly what the hell. How do I add an "index signature" to my person types so I can get on with my life?

Apologies for textually whining, I'm just depleted from making progress then TYPESCRIPT!!!

Things are SIMPLE in Javascript:

interface Person {
  id: number
  red: number
  green: number
  blue: number
  buckets: Array<BucketType>
  // Does the index signature go here? What does it look like?
  // I haven't seen any "standard" way of doing this
}

interface BucketType {
  color: string,
  weight: number
}

const personA = {
  id: 123,
  red: 4,
  green: 5,
  blue: 6,
  buckets: [
    {
      color: 'Blue',
      weight: 4
    }
  ]
}
const personB = {
  id: 456,
  red: 7,
  green: 8,
  blue: 9,
  buckets: [
    {
      color: 'Red',
      weight: 10
    }
  ]
}
const people = [ personA, personB ]

for (let person of people) {
  for (let bucket of person.buckets) {
    console.log(bucket.weight) // 4, then 10
    console.log(bucket.color)  // 'Blue', then 'Red'
    bucket.weight += person[bucket.color.toLowerCase()] // ERROR: NO INDEX SIGNATURE!!!! (Typescript)
    console.log(bucket.weight) // In pure Javascript, this logs '10', then '17'
  }

}

Honestly what the hell. How do I add an "index signature" to my person types so I can get on with my life?

Apologies for textually whining, I'm just depleted from making progress then TYPESCRIPT!!!

• javascript
• reactjs
• typescript

• Does this answer your question? Typescript: No index signature with a parameter of type 'string' was found on type '{ "A": string; } – Shubhaw Kumar Commented Mar 17, 2020 at 19:03
• No, because I don't know what those answers mean in relation to my question. Thank you, but I've reviewed that post a bunch of times already. What I want to know is "how" to add an index signature to fix this error. I will update the post with my person interface – bruh Commented Mar 17, 2020 at 19:05
• Would you please try to use type for every person object when defined personA:any = {} and personB:any = {} – Atiqul Alam Commented Mar 17, 2020 at 19:12

1 Answer 1

The Typescript type checker is plaining because it cannot check that your code will not result in an error. The Typescript type checker cannot read the values of the string 'Red' and 'Blue' and know that if they are lowercased they match a property on your object. This can only be done at runtime, not at type checking time.

You must thus hint to the piler what the possible outes of bucket.color.toLowerCase() might be like this:

bucket.weight += person[bucket.color.toLowerCase() as 'red'|'blue'|'green'];