I am struggling to add a dynamic Vue 2 component with correct typing in TypeScript. The documentation clearly mentions that the is attribute accepts values of type
string | ComponentDefinition | ComponentConstructornode_modules, as well as in the Vue and DefinitelyTyped repositories. Where can I find the definitions for these types?
Here are relevant sections from my Single File Component:
<ItemComponent
v-for="(item, index) in myItems"
:key="`${item.name}-${index}`"
>
<component :is="item.icon"></component>
</ItemComponent>
import {Component, Vue} from 'vue-property-decorator';
import IconCreditCard from '...';
import IconGiftCard from '...';
interface IItem {
name: string;
icon: string | unknown; // this is the type causing confusion
};
@Component({
components: {
IconCreditCard,
IconGiftCard,
...
}
})
export default class MyComponent extends Vue {
myItems: Array<IItem> = [
{
name: 'Gift Card',
icon: IconGiftCard,
},
{
name: 'Credit Card',
icon: IconCreditCard,
},
];