( VUE Computed ) Property 'XXX' does not exist on type 'CreateComponentPublicInstance'

Question

I using Vue 3 typescript and I've tried to create a computed property classes and contain return object like these

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

but I got these error

(property) onScroll?: boolean | undefined

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

I think this is because of the return type on the computed. But I'm not so sure and I don't know how to make the return type object

Hope you all can help me, Thanks in advance

Answer 1

computed property classes should declare a type, like this

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