vuejs-confirm-dialog icon indicating copy to clipboard operation
vuejs-confirm-dialog copied to clipboard

TypeScript error calling createConfirmDialog()

Open fabiobulgarella opened this issue 2 years ago • 1 comments

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.

fabiobulgarella avatar Oct 21 '23 19:10 fabiobulgarella

It's a known problem. It occurs when you have default values for your props. Sorry, it will be fixed somewhen in the future

harmyderoman avatar Oct 22 '23 20:10 harmyderoman