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