타이프스크립트 인터페이스에서 사용할 수 있도록 구성요소 유형을 가져오는 방법 - Vue 3

타이프스크립트 인터페이스에서 사용할 수 있도록 구성요소 유형을 가져오는 방법 - Vue 3

나중에 동적으로 구성 요소를 전환할 수 있도록 구성 요소 배열을 설정하려고 합니다. 하지만 저는 타이프스크립트로 작업하는 데 어려움을 겪고 있으며 온라인에서 어떤 방식으로 질문을 해도 이전의 모든 대답은 완전히 다른 것들에 관한 것입니다.

저는 제가 하고 싶은 일의 스크린샷을 제공했습니다. 나는 타이프스크립트 인터페이스를 작성할 수 있고 내가 통과하는 모든 vue 구성 요소에 해당하는 유형을 제공할 수 있기를 원한다. 전달되는 vue 성분인지 확인만 하면 됩니다, 어떤 성분이든 상관없습니다. 기본적으로 Vue 구성요소 유형 정의가 필요합니다. 그걸 어떻게 하는 거죠?

---

시도한 대로 올바른 유형이지만 사용하기 전에 가져와야 합니다:

<script setup lang="ts">
import type { Component } from 'vue'
⋮
interface Props {
  header?: Component
  body?: Component
  footer?: Component
}

const fragments: Props = {
  header: FragProfile,
  body: FragSubject,
  footer: TypeSection
}
</script>

데모를 하다