Typescript 类型'；上不存在属性X；Vue'；使用此.$parent.somePropOrMethod和此.$root.somePropOrMethod时

将VueJS与TypeScript一起使用时，通过

this.$parent.somePropMethod

或

this.$root.somePropMethod

访问属性或方法会导致类型错误

属性somePropMethod不存在于类型“Vue”

Vue

的接口是

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

那么，我们应该如何以类型安全的方式访问父元素或根元素上的属性和方法呢

---

似乎接口应该是

Vue&{[key:string]：any}

，以允许它在

$root

和

$parent

属性上具有未知的属性和方法。

对于类型脚本类型错误，我通常通过扩展自定义接口或将其设置为any来解决。但我不确定这是标准模式

自定义接口

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

或设置为任何

(this.$parent as any).somePropOrMethod

---

是否向元素添加了自定义属性？如果是这样的话，你就有点错过了打字脚本的要点。如果需要Vue元素上的自定义数据（或任何其他元素}，您应该创建一个声明了这些数据类型的新类/接口。Typescript试图使javascript更加严格，因此您总是提前知道可用的属性/方法。为了进一步澄清：这些不是自定义属性。它们是添加到父组件的常规属性nents

data

option和

methods

option。VueJS在运行时理解

this.$parent.myProp

，因为它确实存在于父组件上，但typescript无法理解。哦，我明白了，这是预期的Vue流。请原谅我没有意识到这一点。正如@DavidJapan在他的回答中所写的，要进行扩展在Vue类的基础上，可能是实现这一点的最合适的方法，并将您的元素强制转换到该类

（this.$parent作为MyVueExtension）。myProp

（this.$parent作为任意项）.SomePropMethod

你说得对，我确实尝试过，它也能工作，但我试图避免像那样注释每个$parent类型。我认为typescript应该能够从$parent的组件选项中插入它。是的，让我们等待其他天才的回答：>我最终使用了类似于你的解决方案，因为它能工作。我使用了

类型VueExtensions=Vue&{[key:string]：any}；

因为这对任何可能的属性都是通用的。然后

（this.$parent作为VueExtensions）。somePropMethod

-直到我听到一种更正式的方式，它完成了任务！更令人沮丧的是它似乎没有

（this.$parent作为MyParentComponent的类型）.此方法

也可以使用。