[vue3] defineAsyncComponent

TS7022: 'default' implicitly has type 'any' because it does not have a type annotation and is referenced directly or indirectly in its own initializer. 에러가 뜬다면 확인해 봐야할 사항이다.

관련 vue3문서

defineComponent 로는 비동기적으로 컴포넌트를 가져올 수 없으나 sciprt에서 import 해서 가져오니 작동은 잘 되지만 에러표시가 뜬다.

defineComponent의 componets 안에서 import 해 오기 위해 사용하는 composition api인 defineAsyncComponent를 사용하지 않고 import를 받아왔을 경우에 위와 같은 typescript 에러가 뜰 수 있다.

// 작동은 잘 되지만 웹스톤에 에러표시 뜸
<script lang="ts">
  import File from './file/vue'
  import { defineComponent } from "vue"

  export default defineComponent({
    name: 'name',
    components: { File }, // vue3 defineComponent composition api로는 비동기로 가져올 수 없음 
    setup() {
    }
  })
</script>

// defineAsyncComponent로 작동시켜 해결
<script lang="ts">
  import { defineAsyncComponent, defineComponent } from "vue"

  export default defineComponent({
    name: 'name',
    components: {
      File: defineAsyncComponent(() => import('./file.vue')) // 이런식으로 defineAsyncComponent를 불러와서 써야함
    },
    setup() {
    }
  })
</script>