Vue+TS使用this.$refs时报错$refs不存在于Vue|Element等类型如何解决

报错原因 #

TypeScript 默认将this.$refs下所有引用的类型推导为联合类型Vue | Element | Vue[] | Element[]，无法自动识别单个ref绑定的具体组件类型，因此直接访问目标组件的$refs属性时，会触发类型不存在的校验报错。

解决方案 #

方案1：调用处临时类型断言（适合临时修改、快速验证场景） #

直接在调用时对this.$refs.calendars做类型断言，告知TS其真实类型：

// 方式1：断言为具体组件类型（推荐，保留类型校验能力）
import VDatePicker from 'v-calendar/lib/components/date-picker.umd'

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

// 方式2：简化断言为Vue实例/any（适合不需要严格类型校验的场景）
((this.$refs.calendars as Vue).$refs.calendar as any).showPageRange({
  from: this.dates.end
})

方案2：组件内声明$refs类型（适合长期维护、一劳永逸场景） #

提前声明当前组件的$refs结构，扩展Vue实例类型后，所有调用位置都不需要额外断言：

import VDatePicker from 'v-calendar/lib/components/date-picker.umd'

interface Data {
  dates?: { start: Date; end: Date };
}
// 声明当前组件的$refs结构
interface ComponentRefs {
  calendars: VDatePicker
}

// 给Vue.extend传入Refs泛型参数
export default Vue.extend<Data, {}, {}, ComponentRefs>({
  components: {
    VDatePicker
  },
  data(): Data {
    return {
      dates: undefined
    };
  },
  methods: {
    yourMethod() {
      // TS可自动识别类型，无报错
      this.$refs.calendars.$refs.calendar.showPageRange({
        from: this.dates.end!
      })
    }
  }
})

方案3：类组件写法使用@Ref装饰器（如果项目用vue-property-decorator） #

通过装饰器直接给ref绑定类型，代码更简洁：

import { Component, Vue, Ref } from 'vue-property-decorator'
import VDatePicker from 'v-calendar/lib/components/date-picker.umd'

@Component
export default class YourComponent extends Vue {
  // 直接绑定ref类型
  @Ref() readonly calendars!: VDatePicker

  dates?: { start: Date; end: Date }

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

注意事项 #

• 若ref绑定在v-for循环的元素上，对应的类型要声明为数组，例：calendars: VDatePicker[]
• 开启严格空校验时，访问可选属性如this.dates.end需提前判断非空，或添加非空断言!避免空值报错。

内容的提问来源于stack exchange，提问作者NuttPong Anupat