CODEWITHSUNDEEP
reactjstypescript
idhxx
idhxx

Reputation: 45

Typescript with React > Element implicitly has an 'any' type because expression of type 'string' can't be used to index

I'm stuck on this issue whilst trying to build a project using typescript with react. Here are the error messages from 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 |   })`

Seems that the errors occur inline 22 with parameter ele.

Let's say I have this:

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;

I tried looking everywhere on TypeScript docs, but how the heck am I suppose to interface this so it can accept ele[e]??

Upvotes: 0

Views: 2375

Answers (1)

TheoNeUpKID
TheoNeUpKID

Reputation: 928

It looks like the problem is that your trying to use a string of type any as an index.

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

Data.dataset being a {} dictionary when iterating forEach "ele" as key of type string and when looping keys of type number. The exception is being thrown because your trying to use a string as an index. NOTE if the keys in Datadataset are of type string, the forEach loop will print each char in string i.e., substring. If you are trying to copy the dictionary into a new dictionary. It can be achieved doing the following.

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] = [];
  }
}

Upvotes: 1

Related Questions