Vue 3 스크립트 설정 Typescript가 템플릿 참조에 "el" 매개변수를 암시적으로 입력했습니다.

Question

다음 오류와 함께 TypeScript가 나에게 소리를 지르는 이유를 알려주실 수 있나요? 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를 남겨두는 것은 일반적으로 좋은 습관이 아닙니다. 올바른 해결 방법은 구성 요소 스크립트에 형식화된 참조 처리 기능을 정의하는 것입니다. 매개변수화되어야 하므로 고차 함수가 될 수 있습니다.

으아아아

그리고 :ref="saveRef(index)"로 사용하세요.