Vue3+Ts 项目中定义 ref 实例的类型-一一网

前言

在 vue3 的项目当中，有时候需要使用ref 获取到组件的实例对象。当结合 typescript 使用时就需要进行类型的定义才能访问到实例的成员。

就我目前知道的就有两种方式

自定义类型
通过组件的setup函数自动推断

// 组件 child.vue

<script lang="ts">
  export default defineComponent({
  
  setup(){
     const num  = ref(0);
     
     return {
        num
     }
  }
})
</script>

// 使用的页面

<template>
   <child ref="childRef"/>
</template>

<script lang="ts">
  export default defineComponent({
   
   setup(){
   
     const childRef = ref(null); // 
     
     onMounted(() => {
         childRef.value.num // 如果没有定义类型，这里就无法访问到 num
     })
   }
})
</script>
复制代码

自定义类型

当然我们也可以直接定义 child.vue 组件实例的类型

直接在 child.vue 中定义类型 ChildCtx

  // 组件 child.vue

<script lang="ts">
  
  // ++ 定义类型
  export interface  ChildCtx {
    num: number;
  }
  
  export default defineComponent({
  
  setup(){
     const num  = ref(0);
     
     return {
        num
     }
  }
})
</script>
复制代码

在使用的时候

 <template>
   <child ref="childRef"/>
 </template>
  import {defineComponent, onMouned } from 'vue'
  import {ChildCtx}, Child from './child.vue'
  <script lang="ts">
     export default   defineComponent({
        components: {Child},
        setup(){
         //++ 定义类型
         const childRef = ref<null | ChildCtx>(null);
         
         onMouned(() => {
            childRef.value?.num; // 这里可以访问到 num 属性
         })
        }
        
     })
  </script>
  
复制代码

通过组件的setup函数自动推断

 <template>
   <child ref="childRef"/>
 </template>
  import {defineComponent, onMouned } from 'vue'
  import  Child from './child.vue'
  // ++ 根据组件自动推断
  type ChildCtx = Exclude<ReturnType<Required<typeof Child>['setup']>, void | RenderFunction | Promise<any>>;
  <script lang="ts">
     export default   defineComponent({
        components: {Child},
        setup(){
         //定义类型
         const childRef = ref<null | ChildCtx>(null);
         
         onMouned(() => {
            childRef.value?.num; // 这里可以访问到 num 属性
         })
        }
        
     })
  </script>
  
复制代码