时间戳

首页 > 解决方案 > 打字稿 - 没有带有“字符串”类型参数的索引签名

javascript - 打字稿 - 没有带有“字符串”类型参数的索引签名

问题描述

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'
  }

}

老实说什么鬼。如何为我的人物类型添加“索引签名”，以便我可以继续我的生活？

为文字发牢骚道歉，我只是因为取得进步而精疲力尽，然后打字！

标签： javascriptreactjstypescript

解决方案

Typescript 类型检查器正在抱怨，因为它无法检查您的代码是否不会导致错误。Typescript 类型检查器无法读取字符串 'Red' 和 'Blue' 的值，并且知道如果它们是小写的，它们会匹配对象上的属性。这只能在运行时完成，而不是在类型检查时完成。

因此，您必须向编译器提示可能的结果bucket.color.toLowerCase()可能是这样的：

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

推荐阅读