vue3 typescript 在methods和setup中使用$refs并解决Object is possibly “null”

在vue中，通常在template中给某组件设置了 ref属性后，在methods中，直接this.$refs调用即可。

但是使用了typescript后，this.$refs.xxx将会被提示Object is of type 'unknown'。这需要将变量定义一下类型。

import  XXComponent  from 'XXComponent.vue';
...
(this.$refs.xxx as XXComponent).method
import { XXComponent } from 'XXComponent';
...
(this.$refs.xxx as typeof XXComponent).method

然后在setup中是没有this使用的，官方文档中写到使用的例子

<template>
  <div ref="root">This is a root element</div>
</template>
<script>
  import { ref, onMounted } from 'vue'
  export default {
    setup() {
      const root = ref(null)
      onMounted(() => {
        // the DOM element will be assigned to the ref after initial render
        console.log(root.value) // <div>This is a root element</div>
      })
      return {
        root
      }
    }
  }
</script>

然而，直接复制官方的例子后，在setup中想使用组件的方法，root.value.xxx提示Object is possibly ‘null’。methods中使用setup导出的root.xxx也提示Object is possibly ‘null’。需要定义一下这个root的类型

import {onMounted} from 'vue';
...
interface IComponent{
    xxx?:Function
}
...
setup(){
const root = ref<IComponent>({});
onMounted(() => {
            console.log(root.value.xxx) 
        //执行
        root.value.xxx(params);
        
      })
},
methods:{
    YYY(){
        console.log(root.xxx);
        //执行
        root.xxx(params);
    }
}

只在methods中使用就是对每个$refs的属性对象都需要转换类型判断，如果是组件就需要import组件。

在setup中定义共享出去就需要定义每一个使用到的ref。

参考文章：
https://www.lanwuyaojiu.cn/blogm/blogart-112.html