Компоненты высшего порядка с типом потока для внедрения реквизита (при сохранении возможности defaultProps)

Question

Фон:

1. Документация Flow по типу компонентов более высокого порядка описывает внедрение реквизита и способ поддержки defaultProps , но в предлагаемых примерах кода используются разные подходы, и нет примера объединения двух.

2. Начиная с версии 0.72, Flow устарел выводимый тип * (звездочка).

Задача

Я пытаюсь объединить рецепты из документации Flow и ввести функцию, которая внедряет определенное свойство из хранилища избыточности в предоставленный компонент. Вот мой код:

import React, { Component, type ComponentType, type ElementConfig } from 'react';
import { connect } from 'react-redux';

import type { State } from 'client/types/redux';

export type InjectedProps = {
  xs: string[]
}

export default function injector<Props, Com: ComponentType<Props>>(
  DecoratedComponent: Com
) : ComponentType<$Diff<ElementConfig<Com>, InjectedProps>> {

  class Decorator extends Component<ElementConfig<Com>> {

    render() {
      return (
        <DecoratedComponent
          {...this.props} // the props will now contain xs from redux
        />
      );
    }

  }

  return connect((state: State)  => ({
    xs: state.xs
  }))(Decorator);
}

Вот упрощенная версия этого кода (без приведения), которая выдает ту же ошибку, что и код выше в Try Flow .

Обратите внимание, что ошибка исчезает , если для ComponentType.

используется тип *.

Не могли бы вы предложить, как правильно набрать эту функцию высшего порядка, не используя устаревший * type

Answer 1

Существует исправленная версия вашего упрощенного примера.

import React, { Component, type ComponentType, type ElementConfig } from 'react';

type InjectedProps = {
  xs: string[]
}
// notice that InProps must contain an xs property that must be an array of strings
export default function injector<InProps: { xs: string[] }, Com: ComponentType<InProps>, OutProps: $Diff<ElementConfig<Com>, InjectedProps>>(
  DecoratedComponent: Com
) : ComponentType<OutProps> {

  return function decorator(props: OutProps) { // notice OutProps here
      const xs = ['foo']
      return (
        <DecoratedComponent
          {...props}
          xs={xs}
        />
      );
  }
}