The problem with the need for multiple definitions props & emits

[nestle49]

The problem with the need for multiple definitions defineProps and defineEmits.

It looks good:

<script lang="ts" setup>
interface Props {
    isEnabledMain?: boolean;
}

withDefaults(defineProps<Props>(), {
    isEnabledMain: true
});
</script>

But if we have 5 components using the same composition? For example Input component from project:

Input from 1 site theme:

const emit = defineEmits<{
    (event: 'click', e: MouseEvent): void;
    (event: 'input', item: unknown): void;
    (event: 'input', item: TextFieldItem, index: number): void;
}>();

interface ITextFieldProps {
    items?: TextFieldItem[];
    inputAttrs?: InputHTMLAttributes;
    value?: number | object | string;
    selectValue?: ((val: object) => string) | null;
    selectLabel?: (i: TextFieldItem) => unknown;
    id?: string;
    mask?: string;
    label?: ReturnType<VueI18n['t']>;
    inputComponent?: string;
    select?: boolean;
    required?: boolean;
    disabled?: boolean;
    autofocus?: boolean;
    centering?: boolean;
    readonly?: boolean;
    isNeedSearch?: boolean;
    selectOneItem?: boolean;
    doNotShowAsteriskRequired?: boolean;
    isYearSelect?: boolean;
    isCursorPointer?: boolean;
}

const props = withDefaults(defineProps<ITextFieldProps>(), {
    items: (): TextFieldItem[] => [],
    inputAttrs: (): InputHTMLAttributes => ({}),
    value: '',
    selectValue: null,
    selectLabel: (i: TextFieldItem) => i,
    id: '',
    mask: '',
    label: '',
    inputComponent: 'input',
    select: false,
    required: false,
    disabled: false,
    autofocus: false,
    centering: false,
    readonly: false,
    isNeedSearch: false,
    selectOneItem: false,
    doNotShowAsteriskRequired: false,
    isYearSelect: false,
    isCursorPointer: false
});

const propsRefs = toRefs(props);

const { ... } = useTextField(
    propsRefs.items,
    propsRefs.value,
    propsRefs.selectValue,
    propsRefs.selectLabel,
    propsRefs.id,
    propsRefs.mask,
    propsRefs.select,
    propsRefs.disabled,
    propsRefs.centering,
    propsRefs.readonly,
    propsRefs.isNeedSearch,
    propsRefs.selectOneItem,
    propsRefs.isYearSelect,
    propsRefs.autofocus,
    emit
);

Input from site theme 2:

const emit = defineEmits<{
    (event: 'click', e: MouseEvent): void;
    (event: 'input', item: unknown): void;
    (event: 'input', item: TextFieldItem, index: number): void;
}>();

interface ITextFieldProps {
    items?: TextFieldItem[];
    inputAttrs?: InputHTMLAttributes;
    value?: number | object | string;
    selectValue?: ((val: object) => string) | null;
    selectLabel?: (i: TextFieldItem) => unknown;
    id?: string;
    mask?: string;
    label?: ReturnType<VueI18n['t']>;
    inputComponent?: string;
    select?: boolean;
    required?: boolean;
    disabled?: boolean;
    autofocus?: boolean;
    centering?: boolean;
    readonly?: boolean;
    isNeedSearch?: boolean;
    selectOneItem?: boolean;
    doNotShowAsteriskRequired?: boolean;
    isYearSelect?: boolean;
    isCursorPointer?: boolean;
}

const props = withDefaults(defineProps<ITextFieldProps>(), {
    items: (): TextFieldItem[] => [],
    inputAttrs: (): InputHTMLAttributes => ({}),
    value: '',
    selectValue: null,
    selectLabel: (i: TextFieldItem) => i,
    id: '',
    mask: '',
    label: '',
    inputComponent: 'input',
    select: false,
    required: false,
    disabled: false,
    autofocus: false,
    centering: false,
    readonly: false,
    isNeedSearch: false,
    selectOneItem: false,
    doNotShowAsteriskRequired: false,
    isYearSelect: false,
    isCursorPointer: false
});

const propsRefs = toRefs(props);

const { ... } = useTextField(
    propsRefs.items,
    propsRefs.value,
    propsRefs.selectValue,
    propsRefs.selectLabel,
    propsRefs.id,
    propsRefs.mask,
    propsRefs.select,
    propsRefs.disabled,
    propsRefs.centering,
    propsRefs.readonly,
    propsRefs.isNeedSearch,
    propsRefs.selectOneItem,
    propsRefs.isYearSelect,
    propsRefs.autofocus,
    emit
);

And repeat this defenition for each component (five the same definitions!)

Also definition from composable:

export interface ITextFieldEmits {
    (event: 'click', e: MouseEvent): void;
    (event: 'input', item: unknown): void;
    (event: 'input', item: TextFieldItem, index: number): void;
}

export interface ITextFieldProps {
    items?: TextFieldItem[];
    inputAttrs?: InputHTMLAttributes;
    value?: number | object | string;
    selectValue?: ((val: object) => string) | null;
    // eslint-disable-next-line @typescript-eslint/ban-types
    selectLabel?: Function;
    id?: string;
    mask?: string;
    label?: string;
    inputComponent?: string;
    select?: boolean;
    required?: boolean;
    disabled?: boolean;
    autofocus?: boolean;
    centering?: boolean;
    readonly?: boolean;
    isNeedSearch?: boolean;
    selectOneItem?: boolean;
    doNotShowAsteriskRequired?: boolean;
    isYearSelect?: boolean;
    isCursorPointer?: boolean;
}

type ITextFieldPropsRequiredRefs = ToRefs<Required<ITextFieldProps>>;

export function useTextField(
    items: ITextFieldPropsRequiredRefs['items'],
    value: ITextFieldPropsRequiredRefs['value'],
    selectValue: ITextFieldPropsRequiredRefs['selectValue'],
    selectLabel: ITextFieldPropsRequiredRefs['selectLabel'],
    id: ITextFieldPropsRequiredRefs['id'],
    mask: ITextFieldPropsRequiredRefs['mask'],
    select: ITextFieldPropsRequiredRefs['select'],
    disabled: ITextFieldPropsRequiredRefs['disabled'],
    centering: ITextFieldPropsRequiredRefs['centering'],
    readonly: ITextFieldPropsRequiredRefs['readonly'],
    isNeedSearch: ITextFieldPropsRequiredRefs['isNeedSearch'],
    selectOneItem: ITextFieldPropsRequiredRefs['selectOneItem'],
    isYearSelect: ITextFieldPropsRequiredRefs['isYearSelect'],
    autofocus: ITextFieldPropsRequiredRefs['autofocus'],
    emit: ITextFieldEmits
) { ... }

It looks terrible, because we are forced to repeat the code, and the whole syntax looks cumbersome

I don't know the reason why we can't import the props definition, but perhaps we can discuss this problem?

[sxzz]

Refer to vuejs/core#4294 (comment)