带有 React > Element 的打字稿隐含地具有“任何”类型，因为“字符串”类型的表达式不能用于索引答案

【问题标题】：Typescript with React > Element implicitly has an 'any' type because expression of type 'string' can't be used to index带有 React > Element 的打字稿隐含地具有“任何”类型，因为“字符串”类型的表达式不能用于索引
【发布时间】：2021-03-05 03:14:19
【问题描述】：

我在尝试使用带有 react 的 typescript 构建项目时遇到了这个问题。以下是来自 typescript 的错误消息。

Enter code hereElement implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ time: string; EC_slab1: number; EC_slab2: number; EC_drain_PC: number; WC_slab1: number; WC_slab2: number; CO2air: number; HumDef: number; Rhair: number; Tair: number; EnScr: number; BlackScr: number; ... 4 more ...; Tout: number; }'.
  No index signature with a parameter of type 'string' was found on type '{ time: string; EC_slab1: number; EC_slab2: number; EC_drain_PC: number; WC_slab1: number; WC_slab2: number; CO2air: number; HumDef: number; Rhair: number; Tair: number; EnScr: number; BlackScr: number; ... 4 more ...; Tout: number; }'.  TS7053

    20 |       newObj[e] = [];
    21 |     }
  > 22 |     newObj[e].push(ele[e]);
       |                    ^
    23 |     console.log(ele[e]);
    24 |     console.log(e);
    25 |   })`

似乎错误发生在带有参数 ele 的第 22 行。

假设我有这个：

declare global {
  type Dictionary<T> = { [key: string]: T };
}

let newObj: Dictionary<any> = {};
Data.dataset.forEach(ele => {
  const keys = Object.keys(ele);
  keys.forEach(e => {
    // console.log
    if(!newObj[e]){
      newObj[e] = [];
    }
    newObj[e].push(ele[e]);
  })
});

const options: Highcharts.Options = {
  title: {
      text: 'My chart'
  },
  yAxis: {
    title: {
        text: 'Baby boom'
    }
},
  series: [{
      type: 'line',
      name:'a',
      data: [1, 2, 3]
  }, {
    type: 'line',
    name:'b',
    data: [11, 22, 3]
},{
  type: 'line',
  name:'c',
  data: [1, 23, 53]
}],
  
}

const App = (props: HighchartsReact.Props) => <div>
    <HighchartsReact
        highcharts={Highcharts}
        options={options}
        {...props}
    />
</div>

export default App;

我尝试在 TypeScript 文档上到处寻找，但我到底应该如何接口这个以便它可以接受 ele[e]？？

【问题讨论】：

标签： reactjs typescript

【解决方案1】：

看起来问题在于您尝试使用任何类型的字符串作为索引。

newObj[e].push(ele[e]);

Data.dataset 是一个{} 字典，当迭代 forEach "ele" 作为字符串类型的键和循环编号类型的键时。抛出异常是因为您尝试使用字符串作为索引。注意如果Datadataset 中的键是字符串类型，forEach 循环将打印字符串中的每个char，即子字符串。如果您尝试将字典复制到新字典中。可以通过以下方式实现。

let copy_db: Dictionary<any> = {};

// Loop over all the keys in the object
for (let prop in Data.dataset) {

 // Make sure the object has this value, and not its prototype
 if (Data.dataset.hasOwnProperty(prop)) {
    // throws value into new dictionary
    copy_db[prop] = (Data.dataset[prop];
    // if you would like an empty value in the new dictionary, then you would add a else with copy_db[prop] = [];
  }
}

【讨论】：