Vue 3 脚本设置 Typescript |模板引用中隐式输入的“el”参数

Question

谁能告诉我为什么打字稿对我大喊大叫并出现以下错误？ error TS7006：参数“el”隐式具有“any”类型。 ref="(el) => saveRef(index, el)".我很确定 saveRef 函数中设置了正确的类型。

<script lang="ts" setup>
    import FormComponent from '@/components/FormComponent.vue'

    const formRefs = ref<
      ComponentPublicInstance<typeof FormComponent>[]
    >([])

    function saveRef(
      index: number,
      el: ComponentPublicInstance<typeof FormComponent>
    ) {
      formRefs.value[index] = el
    }

    onBeforeUpdate(() => {
      formRefs.value = []
    })
  </script>

  <template>
    <div v-for="(component, index) in components" :key="index">
      <form-component
        :ref="(el) => saveRef(index, el)"
        :component="component"
        :index="index"
      />
   </div>
 </template>

Answer 1

在模板中保留多余的 JS 通常不是一个好习惯。正确的解决方案是在组件脚本中定义类型化引用处理函数。由于它应该是参数化的，因此它可以是高阶函数：

function saveRef(
  index: number,
) {
  return (el: ComponentPublicInstance) => {
    formRefs.value[index] = el
  }
}

并将其用作 :ref="saveRef(index)"。