解决Vue+TypeScript开发中TS不识别this.$refs的问题

问题场景：

用iview框架开发后管系统，需要用到form表单功能，最后提交表单代码是：

this.$refs.form.validate(......)

但是代码报错：

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

因为第一次用TS也是很蒙，查找了网上大概思路就是validate() 并不是 Vue 的方法，而是你某个组件的方法。所以你需要把 this.$refs[formName] 显式标注为那个组件类型；主要问题就是出现在this.$ref在这里,在 vue 开发过程中我们会使用this.$refs去访问某一个具体实例的方法，它会返回一个vue对象或者是Element对象，但是这在 TS并不知道它是所以访问不到的。

解决办法：

既然TS不知道this.$refs是什么，那么我们需要给它加上类型断言，告诉它是什么，也就是需要把 this.$refs[formName] 显式标注为你的那个组件类型；
方法一：
this.$refs.form.validate()变为(this.$refs.form as Vue & {validate:Function}).validate()来告诉 TS编译器this.$refs.form属于VUE类型同时具有validate方法；这里涉及到TS的类型断言as和交叉类型&
Tips1:(交叉类型的表示方法为 Type1 & Type2，结果是取这两个类型的并集拥有两个类型成员的所有属性。)
Tips2:(联合类型的表示方法为 Type1 | Type2，结果是这两个类型中的某一个，只能访问所有类型的共有属性。)
方法二：
通过vue-property-decorator提供给我们的装饰器一劳永逸的将该refs添加到computed属性上

import {
      Vue, Component, Ref } from 'vue-property-decorator'
import Form from '@/path/to/another-component.vue'
@Component
export default class YourComponent extends Vue {
     
  @Ref() readonly form!: Form
}

等同于

export default {
     
  computed() {
     
    form: {
     
      cache: false,
      get() {
     
        return this.$refs.form as Form
      }
    },
  }
}

方法三：
简单粗暴直接在类里面声明refs

import Form from '@/path/to/another-component.vue'
export default class SomeClass extends Vue {
     
  public $refs!: {
     
    form: Form
  }
}

结束！