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

typescript

Solution

This happens because you try to access `plotOptions` property using string `name`. TypeScript understands that `name` may have any value, not only property name from `plotOptions`. So TypeScript requires to add index signature to `plotOptions`, so it knows that you can use any property name in `plotOptions`. But I suggest to change type of `name`, so it can only be one of `plotOptions` properties.

interface trainInfo {
    name: keyof typeof plotOptions;
    x: Array<number>;
    y: Array<number>;
    type: string;
    mode: string;
}

Now you'll be able to use only property names that exist in `plotOptions`.

You also have to slightly change your code.

First assign array to some temp variable, so TS knows array type:

const plotDataTemp: Array<trainInfo> = [
    {
      name: "train_1",
      x: data.filtrationData.map((i: any) => i["1-CumVol"]),
      y: data.filtrationData.map((i: any) => i["1-PressureA"]),
      type: "scatter",
      mode: "lines"
    },
    // ...
}

Then filter:

const plotData = plotDataTemp.filter(({ name }) => plotOptions[name]);

If you're getting data from API and have no way to type check props at compile time the only way is to add index signature to your `plotOptions`:

type tplotOptions = {
    [key: string]: boolean
}

const plotOptions: tplotOptions = {
    train_1: true,
    train_2: true,
    train_3: true,
    train_4: true
}

Problem

Trying out TypeScript for a React project and I'm stuck on this error: ``` Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ train_1: boolean; train_2: boolean; train_3: boolean; train_4: boolean; }'. No index signature with a parameter of type 'string' was found on type '{ train_1: boolean; train_2: boolean; train_3: boolean; train_4: boolean; }' ``` Which appears when I try to filter the array in my component ``` .filter(({ name }) => plotOptions[name]); ``` So far I looked at the article "Indexing objects in TypeScript" (https://dev.to/kingdaro/indexing-objects-in-typescript-1cgi) since it had a similar error, but I tried to add the index signature to type `plotTypes` and I still get the same error. My component code: ``` import React, { Component } from "react"; import createPlotlyComponent from "react-plotly.js/factory"; import Plotly from "plotly.js-basic-dist"; const Plot = createPlotlyComponent(Plotly); interface IProps { data: any; } interface IState { [key: string]: plotTypes; plotOptions: plotTypes; } type plotTypes = { [key: string]: boolean; train_1: boolean; train_2: boolean; train_3: boolean; train_4: boolean; }; interface trainInfo { name: string; x: Array<number>; y: Array<number>; type: string; mode: string; } class FiltrationPlots extends Component<IProps, IState> { readonly state = { plotOptions: { train_1: true, train_2: true, train_3: true, train_4: true } }; render() { const { data } = this.props; const { plotOptions } = this.state; if (data.filtrationData) { const plotData: Array<trainInfo> = [ { name: "train_1", x: data.filtrationData.map((i: any) => i["1-CumVol"]), y: data.filtrationData.map((i: any) => i["1-PressureA"]), type: "scatter", mode: "lines" }, { name: "train_2", x: data.filtrationData.map((i: any) => i["2-CumVol"]), y: data.filtrationData.map((i: any) => i["2-PressureA"]), type: "scatter", mode: "lines" }, { name: "train_3", x: data.filtrationData.map((i: any) => i["3-CumVol"]), y: data.filtrationData.map((i: any) => i["3-PressureA"]), type: "scatter", mode: "lines" }, { name: "train_4", x: data.filtrationData.map((i: any) => i["4-CumVol"]), y: data.filtrationData.map((i: any) => i["4-PressureA"]), type: "scatter", mode: "lines" } ].filter(({ name }) => plotOptions[name]); return ( <Plot data={plotData} layout={{ width: 1000, height: 1000, title: "A Fancy Plot" }} /> ); } else { return <h1>No Data Loaded</h1>; } } } export default FiltrationPlots; ```

Original source