Как конвертировать тип описания пропсов в пропсы сетапа?

Question

[Влад Токарев]

Хочу сделать функцию, возвращающую компонент. Упрощенный пример кода:

export default (
  propsDefinition = {},
  executeOnMounted: (props) => void = () => {},
) => defineComponent({
  props: propsDefinition,
  setup(props) {
    onMounted(() => {
      executeOnMounted(props);
    });
  },
});

Как корректно, используя дженерики, описать типы для propsDefinition и свойства props в функции executeOnMounted, учитывая что из первого получается второе?

UPD: Чтобы не было недопонимания опишу как это будет использоваться.

import useOnMountedComponent from './...'

export default useOnMountedComponent({
  someProp: { type: String, required: true }
}, (props) => {
  alert(`On mounted: ${props.someProp}`);
});

И вот мне нужно, чтобы TypeScript понимал, что props.someProp - такое свойство есть и это строка, также как он понимает, когда эти пропсы используются в setup(props).

Comments

[Антон Антон]

Эта проблема в script setup не решена?

[Влад Токарев]

Антон Антон, нет, это вообще для создания компонентов вне .vue файлов.

[Aetae]

Честно говоря не понятно ничего.)
Напиши полностью код как ты его видишь в реальном применении(даже если TS будет ругаться).

[Влад Токарев]

Aetae, ну, если совсем ничего непонятно, то зачем что-то писать дальше, что это прояснит?
В данном примере я создаю что-то типа фабрики компонентов. В реальности в ``setup`` еще возращается рендер функция, но это не касается вопроса. Компоненты, создаваемые этой функцией будут выполнять определенную функцию на событие ``onMounted``. В эту функцию попадают ``props`` из ``setup``, которые формируются на основе propsDefinition, передаваемых этой фабрике. Вот и вопрос как все это типизировать?

[Aetae]

Влад Токарев, ответ на написанное: "всё уже типизировано". Помогло?

Не понятно в чём у тебя проблема и чего ты хочешь. Твои русские буквы не несут понятного другим смысла. Напиши сраный код, он не будет зависеть от твоего уникального восприятия, и я смогу понять, как тебе помочь.

[Влад Токарев]

Aetae, ну ты разошелся.

export const useHtmlToVue = <P>(
  propsDefinition: P = {},
  targetComponent: string|ReturnType<typeof defineComponent> = 'div',
  setTargetComponentProps: (PropsFromDefinition<P>) = () => {},
) => defineComponent({
    props: propsDefinition,
    setup(props, { slots }) {
      const isReady = ref(false);
      const slotContainer = ref<HTMLDivElement|null>(null);
      const targetComponentProps = shallowRef<VNodeProps & Record<string, any>>({});
      const slotNodes = computed<HTMLElement[]>(() => [...(slotContainer.value?.children ?? [])]
        .filter((item): item is HTMLElement => item instanceof HTMLElement));
      const propsSetter = (targetProps: Record<string, unknown>) => {
        targetComponentProps.value = targetProps;
      };
      onMounted(() => {
        setTargetComponentProps(
          props,
          slotNodes.value,
          propsSetter,
        );
        isReady.value = true;
      });
      return () => {
        if (isReady.value) {
          return h(targetComponent, targetComponentProps.value);
        }
        return withDirectives(
          h('div', { ref: slotContainer }, h(() => renderSlot(slots, 'default'))),
          [[vShow, false]],
        );
      };
    },
  });

Мне в итоге надо описать, чтобы ``P`` был как тип описания пропсов, передаваемых в defineComponent. Это надо, чтобы из слота брать html элементы, парсить из них какие-то параметры, а потом обработанные параметры передавать в ``targetComponent``.

[Aetae]

Влад Токарев, что-то типа такого?:

<P>(
  propsDefinition: ComponentPropsOptions<P>,
  executeOnMounted: (props: P) => void = () => {}
)

Тока это не будет полностью соответствовать defineComponent, т.к. там понакрутили перегрузок...