使用 this.$parent.somePropOrMethod 和 this.$root.somePropOrMethod 时，类型“Vue”上不存在属性 X

Posted 2023-02-22

【中文标题】使用 this.$parent.somePropOrMethod 和 this.$root.somePropOrMethod 时，类型“Vue”上不存在属性 X

【英文标题】：Property X does not exist on type 'Vue' when using this.$parent.somePropOrMethod and this.$root.somePropOrMethod

【发布时间】：2020-05-02 22:59:14

【问题描述】：

将 VueJS 与 TypeScript 一起使用时，通过 this.$parent.somePropOrMethod 或 this.$root.somePropOrMethod 访问属性或方法会导致类型错误 Property somePropOrMethod does not exist on type 'Vue'

Vue的接口是

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

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

似乎接口应该是Vue & [key: string]: any，以允许$root 和$parent 属性上的未知属性和方法。

【问题讨论】：

您是否为元素添加了自定义属性？如果是这样，您有点错过了打字稿的重点。如果你想在你的 Vue 元素（或任何其他元素）上自定义数据，你应该创建一个声明了这些数据类型的新类/接口。Typescript 试图让 javascript 更严格一些，所以你总是知道，提前，哪些属性/方法可用。

澄清更多：这些不是自定义属性。它们是添加到父组件data 选项和methods 选项的常规属性。 VueJS 在运行时理解this.$parent.myProp，因为它确实存在于父组件上，但 typescript 无法弄清楚。

哦，我明白了，这是预期的 Vue 流程。请原谅我不知道这一点。正如@DavidJapan 在他的回答中所写，扩展 Vue 类可能是实现这一目标的最合适方法，并将您的元素转换为该类(this.$parent as MyVueExtension).myProp

我在***.com/questions/56002310/… 上回答了这个问题。我希望它会有所帮助。

【参考方案1】：

对于打字稿类型错误，我通常通过扩展自定义界面或设置为 any 来解决。但我不确定这是标准模式......

自定义界面

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

或设置为任意

(this.$parent as any).somePropOrMethod

【讨论】：

(this.$parent as any).somePropOrMethod 你是对的，我确实尝试过并且它有效，但我试图避免必须像这样注释每个 $parent 类型。我认为打字稿应该能够从 $parent 的组件选项中插入它。

是的，等一下其他天才的回答：>

我最终使用了与您的解决方案类似的东西，因为它有效。我使用了type VueExtensions = Vue & [key: string]: any;，因为这对于任何可能的属性都是通用的。然后(this.$parent as VueExtensions ).somePropOrMethod - 直到我听到更正式的方式，它才能完成工作！

更令人沮丧的是，(this.$parent as typeof MyParentComponent).somePropOrMethod 似乎也不起作用。