I've encountered an issue with my Vue2 application using the Composition API where TypeScript is complaining about calling a method of the Modal component without adding @ts-ignore. The components in question are <Modal> and <App>.
In the following simplified example, I have omitted app initialization:
Modal.vue
<template>
<div ref="modalEl">I'm the modal<slot></slot></div>
</template>
<script lang="ts">
import {defineComponent, onMounted, ref} from '@vue/composition-api';
import Modal from 'bootstrap/js/dist/modal';
export default defineComponent({
setup(props) {
const modalEl = ref<Element | string>('');
let modal: Modal;
onMounted(() => {
modal = new Modal(modalEl.value);
});
const show = () => modal.show();
return {
modalEl,
show,
}
}
});
</script>
App.vue
<template>
<div>
<Modal ref="modalSave">I'm modal content</Modal>
<button @click="showModal">show modal</button>
</div>
</template>
<script lang="ts">
import {ref,defineComponent} from '@vue/composition-api';
import Modal from 'Modal.vue';
export default defineComponent({
components: {
Modal
},
setup(props) {
const modalSave = ref<InstanceType<typeof Modal> | null>(null);
const showModal = () => modalSave.value?.show();
return {
modalSave,
showModal
}
}
});
</script>
Although everything seems to work fine, TypeScript throws an error during compilation:
ERROR in App.vue.ts(115,24) TS2339: Property 'show' does not exist on type '{ readonly $el: Element; readonly $options: { data?: DefaultData | undefined; props?: string[] | { [x: string]: Prop | { type?: Prop | Prop[] | undefined; required?: boolean | undefined; default?: any; validator?: ((value: any) => boolean) | undefined; } | Prop<...>[]; } | undefined; ... 35 more ...'.
If anyone has suggestions on how to resolve this TypeScript error without resorting to ts-ignore, please share your insights. Thank you!