Проблемы с машинописью, реагирование и перекомпоновка

Question

Заранее извиняюсь за расплывчатое название, это довольно сложно для моей проблемы.

Я пытаюсь использовать React, Recompose и Typescript вместе, но при попытке передать реквизиты в мой компонент, я получаюследующая ошибка:

[ts] Property 'bar' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<{}, any, any>> & Readonly<{ children?: ReactNode; }> & Readonly<{}>'.

Компонент импортируется следующим образом:

import TestComponent from './TestComponent'

и называется так:

<TestComponent bar="hello"/>

Вот структура моей папки компонентов:

├── TestComponent.tsx
├── TestComponentContainer.ts
└── index.ts

index.ts выглядит следующим образом:

import TestComponentContainer from './TestComponentContainer'

export default TestComponentContainer

TestComponent.jsx какследующим образом:

import * as React from 'react'

interface IProps {
  foo: string
  bar: string
}

const TestComponent: React.SFC<IProps> = ({ foo, bar }) => (
  <div>
    <p>{foo}</p>
    <p>{bar}</p>
  </div>
)

export default TestComponent

TestComponentContainer.ts выглядит следующим образом:

import { compose, withProps } from 'recompose'

import TestComponent from './TestComponent'

export default compose(
  withProps({
    foo: 'stringy string string',
  }),
)(TestComponent)

Я получаю, что мне не хватает какого-то объявления типа для реквизита, который проходит через, но может 't для моей жизни выяснить, что именно я должен делать.

Редактировать:

Кроме того, как это сделать с помощью вложенного подхода:

export default compose(
  setDisplayName('PlayerCardContainer'),
  withMutation(mutation),
  withHandlers(createHandlers),
)(PlayerCard)

Answer 1

Набор для compose очень универсален и позволяет вам указать тип результирующего компонента и тип компонента, к которому он может быть вызван , но он не обеспечивает безопасность типовили совместимость передаваемых ему функций .

По этой причине лучше избегать compose и просто вкладывать вызовы HOC:

import { withProps } from 'recompose';

import TestComponent from './TestComponent';

export default withProps({
  foo: 'stringy string string',
})(TestComponent);

Редактировать:

Для добавленного примера кода вложение HOC вместо использования compose будет выглядеть так:

export default setDisplayName('PlayerCardContainer')(
  withMutation(mutation)(
    withHandlers(createHandlers)(
      PlayerCard
    )
  )
);