vuejs-confirm-dialog
vuejs-confirm-dialog copied to clipboard
TypeScript error calling createConfirmDialog()
Hello everyone, thanks for this great package.
I have a problem with its typescript support. I'm calling createConfirmDialog() function as follow:
const { reveal } = createConfirmDialog(ConfirmModal, {
title: "Confirm Action",
type: "warning",
text: "Do you want to procede?",
});
I get a validation error on the first argument of createConfirmDialog function (ConfirmModal):
Argument of type 'DefineComponent<{ title: { type: StringConstructor; required: true; }; text: { type: StringConstructor; required: true; }; type: { type: StringConstructor; default: string; }; cancelText: { ...; }; confirmText: { ...; }; }, ... 11 more ..., {}>' is not assignable to type 'DefineComponent<any, any, any, any, any, any, any, any>'.
Type 'DefineComponent<{ title: { type: StringConstructor; required: true; }; text: { type: StringConstructor; required: true; }; type: { type: StringConstructor; default: string; }; cancelText: { ...; }; confirmText: { ...; }; }, ... 11 more ..., {}>' is not assignable to type 'ComponentOptionsBase<Readonly<any>, any, any, any, any, any, any, any, string, {} | { [x: string]: any; }, {}, string, {}>'.ts(2345)
ConfirmModal is a simple vue component. Follow its script section:
<script setup lang="ts">
import { Dialog, DialogPanel, DialogTitle, TransitionChild, TransitionRoot } from "@headlessui/vue";
import { ExclamationCircleIcon, ExclamationTriangleIcon } from "@heroicons/vue/24/outline";
// Properties
defineProps({
title: { type: String, required: true },
text: { type: String, required: true },
type: { type: String, default: "warning" },
cancelText: { type: String, default: "Cancel" },
confirmText: { type: String, default: "Confirm" },
});
// Emits
const emit = defineEmits(["cancel", "confirm"]);
</script>
If I add as any after ConfirmModal, the error goes away but my linter starts to complain (so I would like not to add it).
What could be the problem? How can I solve? Thank you in advance.
It's a known problem. It occurs when you have default values for your props. Sorry, it will be fixed somewhen in the future