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

Question

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      gt  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 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

User · Accepted Answer

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 lt number gt       y  Array lt number gt       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 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                        Then filter   const plotData   plotDataTemp filter    name      gt  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

User · Answer

Thanks to Alex Mckay I had a resolve for dynamic setting a props    for let prop in filter         state filter as Record lt string  any gt   prop    filter prop

User · Answer

I made some small changes to Alex McKay s function usage that I think make it a little easier to follow why it works and also adheres to the no-use-before-define rule  First  define this function to use  const getKeyValue   function lt T extends object  U extends keyof T gt   obj  T  key  U    return obj key     In the way I ve written it  the generic for the function lists the object first  then the property on the object second  these can occur in any order  but if you specify U extends key of T before T extends object you break the no-use-before-define rule  and also it just makes sense to have the object first and its  property second  Finally  I ve used the more common function syntax instead of the arrow operators    gt    Anyways  with those modifications you can just use it like this  interface User     name  string    age  number     const user  User       name   quot John Smith quot     age  20     getKeyValue user   quot name quot    Which  again  I find to be a bit more readable

User · Answer

With out typescript error     const formData   new FormData        Object keys newCategory  map  k i   gt             var d  Object values newCategory  i           formData append k d

User · Answer

This is what it worked for me  The tsconfig json has an option noImplicitAny that it was set to true  I just simply set it to false and now I can access properties in objects using strings

User · Answer

I have made a simulation of the problem  looks like the issue is how we should Access Object Properties Dynamically Using Bracket Notation in Typescript interface IUserProps     name  string    age  number     export default class User     constructor private data  IUserProps        get propName  string   string   number       return this data propName as keyof IUserProps           I found a blog that might be helpful to understand this better  here is a link https   www nadershamma dev blog 2019 how-to-access-object-properties-dynamically-using-bracket-notation-in-typescript

User · Answer

I use this  interface IObjectKeys      key  string   string   number     interface IDevice extends IObjectKeys     id  number    room id  number    name  string    type  string    description  string     If you use the optional property in your object  interface IDevice extends IObjectKeys     id  number    room id   number    name   string    type   string    description   string         you should add  undefined  value into the IObjectKeys interface  interface IObjectKeys      key  string   string   number   undefined

User · Answer

When using Object keys  the following works  Object keys this       forEach key   gt          console log this key as keyof MyClass

User · Answer

When we do something like this obj key  Typescript can t know for sure if that key exists in that object  What I did  Object entries data  forEach item   gt        formData append item 0   item 1

User · Answer

bad const  getKeyValue    key  string    gt   obj  object    gt  obj key       better const  getKeyValue     key  string    gt   obj  Record lt string  any gt     gt  obj key       best const getKeyValue    lt T extends object  U extends keyof T gt  key  U    gt   obj  T    gt    obj key    Bad - the reason for the error is the object type is just an empty object by default  Therefore it isn t possible to use a string type to index     Better - the reason the error disappears is because now we are telling the compiler the obj argument will be a collection of string value  string any  pairs  However  we are using the any type  so we can do better  Best - T extends empty object  U extends the keys of T  Therefore U will always exist on T  therefore it can be used as a look up value  Here is a full example  I have switched the order of the generics  U extends keyof T now comes before T extends object  to highlight that order of generics is not important and you should select an order that makes the most sense for your function  const getKeyValue    lt U extends keyof T  T extends object gt  key  U    gt   obj  T    gt    obj key    interface User     name  string    age  number     const user  User       name   quot John Smith quot     age  20     const getUserName   getKeyValue lt keyof User  User gt   quot name quot   user         gt   John Smith   Alternative Syntax const getKeyValue    lt T  K extends keyof T gt  obj  T  key  K   T K    gt  obj key

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

Examples related to reactjs

Examples related to typescript