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

by

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
}

More Related Contents:

  1. TypeScript: Object.keys return string[]
  2. Angular 2 custom form input
  3. How to check the object type on runtime in TypeScript?
  4. TypeScript how to create a generic type alias for a generic function?
  5. What is the syntax for Typescript arrow functions with generics?
  6. How to extend String Prototype and use it next, in Typescript?
  7. Angular 2: Convert Observable to Promise
  8. Angular2 canActivate() calling async function
  9. Purpose of declare keyword in TypeScript
  10. How to declare a Fixed length Array in TypeScript
  11. Is it possible to restrict number to a certain range
  12. ESLint – Configuring “no-unused-vars” for TypeScript
  13. Keyof inferring string | number when key is only a string
  14. Object destructuring with property names that are not valid variable names
  15. How to declare a type as nullable in TypeScript?
  16. How to use Object.values with typescript?
  17. is there a way to get all required properties of a typescript object
  18. Typescript: ReturnType of overloaded function
  19. What TypeScript version is Visual Studio Code using? How to update it?
  20. Why does TypeScript track mutation of function static properties?
  21. Array VS Type[] in Typescript
  22. What’s the meaning of “=>” in TypeScript? (Fat Arrow)
  23. How to use array.map with tuples in typescript?
  24. how to remove properties via mapped type in TypeScript
  25. TypeScript export imported interface
  26. How to create an Observable from static data similar to http one in Angular?
  27. Setting up tsconfig with spec/test folder
  28. How to pass an instance variable into typescript decorator arguments?
  29. Can I force the TypeScript compiler to use nominal typing?
  30. Optional class members in Typescript

Leave a Comment