How to use this.$refs in vue ts that error Vue | Element | Vue[] | Element[]

Question

I need to use this.$refs.calendars.$refs.calendar.showPageRange() in js it work but in ts that error '$refs' does not exist on type 'Vue | Element | Vue[] | Element[]'

 <v-date-picker
  v-model="dates"
  ref="calendars"
 />

ts

interface Data {
  dates?: { start: Date; end: Date };
 } 
export default Vue.extend({
  components: {
   VDatePicker: () => import('v-calendar/lib/components/date-picker.umd')
  },
   data(): Data {
    return {
      dates: undefined
     };
   },

in methods

    this.$refs.calendars.$refs.calendar.showPageRange({
    from: this.dates.end
  })

Property '$refs' does not exist on type 'Vue | Element | Vue[] | Element[]'.

Answer 1

I encounter the same problem. I put a

//@ts-ignore

above the error line, which means ignore the single line type check. HOWEVER, this can not be the final solution. Wish there could be a better solution.

We also have

//@ts-nocheck

or

//@ts-check

inserted in the very first line of your file that can check or uncheck the specific file of yours.