Тип HOC, который увеличивает компонент с его собственными свойствами?

Question

Я пытаюсь ввести компонент высшего порядка (HOC), используя Recompose, и его тип HOC, используя Flow.

Это мой код:

// @flow
import React from 'react';
import { compose, defaultProps, withProps, type HOC } from 'recompose';

type InnerProps = {
  text: string,
  num: number,
};

type EnhancedComponentProps = {
  text: string,
};

const baseComponent = ({ text, num }: InnerProps) => (
  <div>
    {text}
    {num}
  </div>
);

const enhance: HOC<*, EnhancedComponentProps> = compose(
  defaultProps({
    text: 'world',
  }),
  withProps(({ text }) => ({
    text: `Hello ${text}`,
  }))
);

export default enhance(baseComponent);

Прямо сейчас это терпит неудачу с:

Cannot call enhance with baseComponent bound to a because property num is missing in object type [1] but exists in
InnerProps [2] in the first argument.

     src/Text.js
 [2] 14│ const baseComponent = ({ text, num }: InnerProps) => (
       :
     27│   }))
     28│ );
     29│
     30│ export default enhance(baseComponent);
     31│

     flow-typed/npm/recompose_v0.x.x.js
 [1] 95│   ): HOC<{ ...$Exact<Enhanced>, ...BaseAdd }, Enhanced>;

Пытаясь прочитать документы и некоторые сообщения в блоге, я не смог найти решение. Все примеры, которые я нахожу, очень тривиальны, и ни один из них не охватывает этот простой случай.

Как правильно ввести этот код?

Answer 1

Я думаю, вы получили правильную ошибку. Это говорит:

num отсутствует в типе объекта [1], но существует в InnerProps [2] в первом аргументе.

Вы заявили, что ваш HOC получит то, что в EnhancedComponentProps который отсутствует num, Другими словами, вы пытаетесь извлечь num от объекта, который будет получать только то, что объявлено в EnhancedComponentProps тип.

Основываясь на перекомпоновке документов: вы должны получить эту работу:

// @flow
import React from 'react';
import { compose, defaultProps, withProps, type HOC } from 'recompose';

type EnhancedComponentProps = {
  text: string,
  num: number,
};

const baseComponent = ({ text, num }: EnhancedComponentProps) => ( // in the example from recompose this typing is unnecessary though
  <div>
    {text}
    {num}
  </div>
);

const enhance: HOC<*, EnhancedComponentProps> = compose(
  defaultProps({
    text: 'world',
  }),
  withProps(({ text }) => ({
    text: `Hello ${text}`,
  }))
);

export default enhance(baseComponent);