How to create typescript type for component which must have certain props / events?

[shameleo]

Here is my attempt to do it

modal-manager.ts

import { DefineComponent } from "vue";

export type ModalComponentDefinition = DefineComponent<
    // 1. Props Interface
    {},
    // 2. RawBindings (usually empty for types)
    {},
    // 3. Data (empty)
    {},
    // 4. Computed (empty)
    {},
    // 5. Methods (empty)
    {},
    // 6. Mixins (empty)
    {},
    // 7. Extends (empty)
    {},
    // 8. Emits Definition (Object syntax preferred for types)
    {
        close: (data: unknown) => void,
        //submit: (payload: unknown) => void,
    }

   export function showModal(modal: ModalComponentDefinition) {}
>;

Modal.vue

<template>
  <div>whatever</div>
</template>

<script setup lang="ts">
const emit = defineEmits<{
  close: [data: unknown];
  submit: [data: unknown];
}>();
</script>

App.vue

*App.vue*
<script setup lang="ts">
import Modal from './Modal.vue';
import {showModal} from './modal-manager'

showModal(Modal);     // fails here as type definition doesn't have "submit" event, but component does
</script>

<template>
  <h1>nothing here</h1>
</template>

But it has mijor issue: if component has more events, than I defined, typecheck fails. But it shouldn't. Props / events should be required, but extra props / events must be allowed also. Like it usually works in typescript.
PS I added "strict": true in tsconfig.json

[ismaildasci]

The problem is that DefineComponent type expects exact match. What you need is a type that says "must have at least these events, but can have more".

Try this approach:

import type { Component } from 'vue'

// Define minimum required emits
type RequiredEmits = {
  close: [data: unknown]
}

// Use a generic that extends your requirements
type ModalComponentType<T extends RequiredEmits = RequiredEmits> = Component & {
  emits?: T
}

export function showModal(modal: ModalComponentType) {
  // ...
}

Or even simpler - just check at runtime and keep types loose:

import type { Component } from 'vue'

export function showModal(modal: Component) {
  // Vue component types are really complex
  // sometimes its easier to validate at runtime
}

The issue is Vue's DefineComponent has like 8 generic parameters and strict mode makes it worse. For dynamic component patterns like modal managers, I usually go with looser types and add runtime checks if needed.

If you really want strict typing, consider making a base modal component that all modals extend - then you type against that base class instead.