在使用Typescript时，如何正确注册导入的动态组件？

<template>
  <component :is="componentName"></component>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue';

@Component
export default class DynamicComponent extends Vue {
  @Prop() componentName!: string;
}
</script>

import Vue from 'vue';
import DynamicComponent from './DynamicComponent.vue';

Vue.component('dynamic-component', DynamicComponent);

<dynamic-component :component-name="dynamicComponentName"></dynamic-component>

import Vue from 'vue';

const dynamicComponentName = 'DynamicComponentA';

// 动态导入组件
import(`./components/${dynamicComponentName}.vue`).then((component) => {
  // 将组件名称传递给动态组件
  new Vue({
    el: '#app',
    data: {
      dynamicComponentName: component.default,
    },
  });
});