Vue3属性中箭头函数参数类型定义及组件类型标注方法

核心问题分析 #

• v-for结合ref回调收集组件实例时，TypeScript提示el参数未类型化，导致Vite构建失败
• contentComponents数组用any规避类型检查，不符合TS规范
• 组件实例的$el类型为Element | Node，调用getBoundingClientRect时存在类型风险

解决方案步骤 #

1. 标注组件实例的正确类型 #

通过InstanceType<typeof 组件名>可以直接获取组件的实例类型，替换掉any：

import { ref, computed } from 'vue'
import SomeComponent from './SomeComponent.vue'

// 定义组件实例类型
type SomeComponentInstance = InstanceType<typeof SomeComponent>

const props = defineProps<{ someContentArray: SomeContentArrayType[] }>()

// 标注数组类型，同时允许null（组件卸载时el会返回null）
const contentComponents = ref<(SomeComponentInstance | null)[]>([])

2. 完善ref回调的类型处理 #

ref回调的el可能为null（比如组件销毁阶段），需要先过滤null再存入数组，同时明确el的类型：

<template>
  <some-component
    v-for="(someContent, index) in someContentArray" 
    :key="`${someContent.id}-${index}`" 
    :ref="(el: SomeComponentInstance | null) => {
      if (el) contentComponents.value.push(el)
    }"
  />
</template>

3. 安全处理$el的类型 #

$el的类型是Element | Node，而getBoundingClientRect是Element专属方法，可通过类型守卫或类型断言确保调用安全：

const contentPositions = computed(() => {
  const positions: number[] = []

  contentComponents.value.forEach(component => {
    // 先判断组件存在，再用类型守卫确保$el是Element
    if (component && component.$el instanceof Element) {
      const refBounds = component.$el.getBoundingClientRect()
      positions.push(refBounds.top)
    }
  })
  return positions
})

若能确定$el一定是Element，也可直接用类型断言简化：

const refBounds = (component.$el as Element).getBoundingClientRect()

完整代码示例 #

<template>
  <some-component
    v-for="(someContent, index) in someContentArray" 
    :key="`${someContent.id}-${index}`" 
    :ref="(el: SomeComponentInstance | null) => el && contentComponents.value.push(el)"
  />
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import SomeComponent from './SomeComponent.vue'

type SomeContentArrayType = { id: number /* 补充你的类型定义 */ }
type SomeComponentInstance = InstanceType<typeof SomeComponent>

const props = defineProps<{ someContentArray: SomeContentArrayType[] }>()

const contentComponents = ref<(SomeComponentInstance | null)[]>([])

const contentPositions = computed(() => {
  const positions: number[] = []

  contentComponents.value.forEach(component => {
    if (component && component.$el instanceof Element) {
      positions.push(component.$el.getBoundingClientRect().top)
    }
  })
  return positions
})
</script>

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