typescript - (VUE 计算)属性 'XXX' 在类型 'CreateComponentPublicInstance' 上不存在

Question

我使用 Vue 3 typescript，我尝试创建一个计算属性 classes 并包含像这样的返回对象

NavbarTypes.ts

interface INavbar {
  onScroll?: boolean,
  navbarActive?: boolean
}

export default INavbar

---

data (): NavbarTypes {
  return {
    onScroll: false,
    navbarActive: false,
  }
}

computed: {
  classes () {
    return {
      "navbar--on-scroll": this.onScroll,
      "navbar--active": this.navbarActive
    }
  }
}

但是我得到了这些错误

(property) onScroll?: boolean | undefined

Property 'onScroll' does not exist on type 'CreateComponentPublicInstance<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, EmitsOptions, {}, {}, false, OptionTypesType<{}, ... 4 more ..., {}>, ... 5 more ..., {}>'.

我认为这是因为计算的返回类型。但我不太确定，我不知道如何制作返回类型对象

希望大家能帮帮我，在此先感谢

Answer 1

计算属性类应该像这样声明一个类型

computed: {
  classes ():any {
    return {
      "navbar--on-scroll": this.onScroll,
      "navbar--active": this.navbarActive
    }
  }
}