error TS2339 Property x does not exist on type Y

Question

I don t understand why this code generates TypeScript error   It s not the original code and is a bit derived  so please ignore the non-sense in the example    interface Images      key string   string     function getMainImageUrl images  Images   string     return images main      I m getting error  using TypeScript 1 7 5       error TS2339  Property  main  does not exist on type  Images     Of course I could get rid of the error when writing   return images  main      I d prefer not using string to access the property  What can I do

User · Answer

Starting with TypeScript 2 2 using dot notation to access indexed properties is allowed  You won t get error TS2339 on your example   See Dotted property for types with string index signatures in TypeScript 2 2 release note

User · Answer

If you want to be able to access images main then you must define it explicitly   interface Images       main  string       key string   string     function getMainImageUrl images  Images   string       return images main      You can not access indexed properties using the dot notation because typescript has no way of knowing whether or not the object has that property  However  when you specifically define a property then the compiler knows that it s there  or not   whether it s optional or not and what s the type     Edit  You can have a helper class for map instances  something like   class Map lt T gt        private items     key  string   T         public constructor             this items   Object create null              public set key  string  value  T   void           this items key    value             public get key  string   T           return this items key              public remove key  string   T           let value   this get key           delete this items key           return value           function getMainImageUrl images  Map lt string gt    string       return images get  main        I have something like that implemented  and I find it very useful

User · Answer

I m no expert in Typescript  but I think the main problem is the way of accessing data  Seeing how you described your Images interface  you can define any key as a String   When accessing a property  the  dot  syntax  images main  supposes  I think  that it already exists  I had such problems without Typescript  in  vanilla  Javascript  where I tried to access data as   return json property 0  index  where index was a variable  But it interpreted index  resulting in a   cannot find property  index  of json property 0   And I had to find a workaround using your syntax   return json property 0  index   It may be your only option there  But  once again  I m no Typescript expert  if anyone knows a better solution   explaination about what happens  feel free to correct me

User · Answer

I was getting this error on Vue 3  It was because defineComponent must be imported like this   lt script lang  quot ts quot  gt  import   defineComponent   from  quot vue quot    export default defineComponent       name   quot HelloWorld quot       props            msg  String             created             this testF               methods            testF                 console log  quot testF quot                           lt  script gt

User · Answer

The correct fix is to add the property in the type definition as explained in  Nitzan Tomer s answer  If that s not an option though   Hacky  Workaround 1 You can assign the object to a constant of type any  then call the  non-existing  property  const newObj  any   oldObj  return newObj someProperty   You can also cast it as any  return  oldObj as any  someProperty   This fails to provide any type safety though  which is the point of TypeScript    Hacky  Workaround 2 Another thing you may consider  if you re unable to modify the original type  is extending the type like so  interface NewType extends OldType     someProperty  string     Now you can cast your variable as this NewType instead of any  Still not ideal but less permissive than any  giving you more type safety  return  oldObj as NewType  someProperty

User · Answer

The correct fix is to add the property in the type definition as explained by  Nitzan Tomer  But also you can just define property as any  if you want to write code almost as in JavaScript   arr filter  item any    gt        return item isSelected    true

[typescript] error TS2339: Property 'x' does not exist on type 'Y'

Examples related to typescript