Property X does not exist on type 'Vue' when using this.$parent.somePropOrMethod and this.$root.somePropOrMethod

Question

When using VueJS with TypeScript, accessing a property or method via this.$parent.somePropOrMethod or this.$root.somePropOrMethod results in type error Property somePropOrMethod does not exist on type 'Vue'

The interface for Vue is

export interface Vue {
   ...
   readonly $parent: Vue;
   readonly $root: Vue;
   ...
   }

So how are we supposed to access properties and methods on the parent or root elements in a type-safe manner?

It seems like the interface should be Vue & {[key: string]: any} to allow for it unknown properties and methods on the $root and $parent properties.

Answer 1

For typescript type error , I usually solve by extending custom interface or setting as any . But I am not sure it is standard pattern ...

Custom Interface

export interface _Vue extends Vue {
  somePropOrMethod: any,
  forStringProp: String
}

Or setting as any

(this.$parent as any).somePropOrMethod