（VUE 计算）类型“CreateComponentPublicInstance”上不存在属性“XXX”

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
    }
  }
}