title: Element implicitly has an 'any' type because expression of type 'string' can't be used to index
body: <p>Trying out TypeScript for a React project and I'm stuck on this error:</p>
  
  <pre><code>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; }'
  </code></pre>
  
  <p>Which appears when I try to filter the array in my component</p>
  
  <pre><code>.filter(({ name }) =&gt; plotOptions[name]);
  </code></pre>
  
  <p>So far I looked at the article "Indexing objects in TypeScript" (<a href="https://dev.to/kingdaro/indexing-objects-in-typescript-1cgi" rel="noreferrer">https://dev.to/kingdaro/indexing-objects-in-typescript-1cgi</a>) since it had a similar error, but I tried to add the index signature to type <code>plotTypes</code> and I still get the same error.</p>
  
  <p>My component code:</p>
  
  <pre><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&lt;number&gt;;
    y: Array&lt;number&gt;;
    type: string;
    mode: string;
  }
  
  class FiltrationPlots extends Component&lt;IProps, IState&gt; {
    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&lt;trainInfo&gt; = [
          {
            name: "train_1",
            x: data.filtrationData.map((i: any) =&gt; i["1-CumVol"]),
            y: data.filtrationData.map((i: any) =&gt; i["1-PressureA"]),
            type: "scatter",
            mode: "lines"
          },
          {
            name: "train_2",
            x: data.filtrationData.map((i: any) =&gt; i["2-CumVol"]),
            y: data.filtrationData.map((i: any) =&gt; i["2-PressureA"]),
            type: "scatter",
            mode: "lines"
          },
          {
            name: "train_3",
            x: data.filtrationData.map((i: any) =&gt; i["3-CumVol"]),
            y: data.filtrationData.map((i: any) =&gt; i["3-PressureA"]),
            type: "scatter",
            mode: "lines"
          },
          {
            name: "train_4",
            x: data.filtrationData.map((i: any) =&gt; i["4-CumVol"]),
            y: data.filtrationData.map((i: any) =&gt; i["4-PressureA"]),
            type: "scatter",
            mode: "lines"
          }
        ].filter(({ name }) =&gt; plotOptions[name]);
        return (
          &lt;Plot
            data={plotData}
            layout={{ width: 1000, height: 1000, title: "A Fancy Plot" }}
          /&gt;
        );
      } else {
        return &lt;h1&gt;No Data Loaded&lt;/h1&gt;;
      }
    }
  }
  
  export default FiltrationPlots;
  
  </code></pre>