typescript use the interface to define prop and emit

[mioxs]

What problem does this feature solve?

component.d.ts

import {
  DefineComponent,
  RenderFunction,
  SetupContext,
} from '@vue/runtime-core';

export declare type Emits<T> = {
  [K in keyof T as `on${Capitalize<K & string>}`]?: T[K];
};

export declare type KeyNames<T> = {
  [K in keyof T]: `${K & string}`;
}[keyof T];

export declare interface DefineComponentOption<P, E, R> {
  name?: string;
  props?: Array<KeyNames<P>> | Record<KeyNames<P>, any>;
  emits?: Array<KeyNames<E>> | Record<KeyNames<P>, any>;
  setup?: (
    props: Readonly<P>,
    ctx: SetupContext<Required<E>>,
  ) => R | RenderFunction;
}

export declare function defineComponent<P, E, R = Record<string, unknown>>(
  options: DefineComponentOption<P, E, R>,
): DefineComponent<P & Emits<E>, R>;

What does the proposed API look like?

example
Button.tsx

export interface ButtonProps  {
  label?: string;
}

export interface ButtonEmits {
  click: (value?: string) => void;
  close: () => void;
}

export  default defineComponent({
  name: 'Button',
  props: ['label'],
  emits: ['click', 'close'],
  setup(props: ButtonProps, { emit }: SetupContext<ButtonEmits>) {
    return () => (<></>);
  },
});

VButton.tsx

import { ButtonProps , ButtonEmits } form './Button';

export interface VButtonProps extends ButtonProps  {
  color?: string;
}

export interface VButtonEmits extends Omit<ButtonEmits, 'close'> {}

export default defineComponent({
  name: 'VButton',
  props: ['label','color'],
  emits: ['click'],
  setup(props: VButtonProps, { emit }: SetupContext<VButtonEmits>) {
    return () => (<></>);
  },
});

[edison1105]

duplicate of #4294 ?

[mioxs]

not script-setup

[posva]

Duplicate of #4408

Please, take the time to explain what you are trying to achieve instead of just copy-pasting big chunks or code and letting maintainers try to guess.