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)"。