Property does not exist on React component when defined with recompose

Question

I'm using create-react-app with the typescript scripts as a base, trying to get a simple example working with recompose.

The problem is I can't send down a property directly to the component.

I've created a simple User component ./components/User.tsx:

import * as React from 'react';
import { compose, withState, withHandlers } from 'recompose';

export interface WithStateProps {
    counter: number
    setCounter: (x: (c: number) => number) => void;
}

export interface WithHandlerProps {
    increment: () => void
    decrement: () => void
}

interface ComponentProps {
    name: string
}

export type ComposedProps = WithStateProps & WithHandlerProps
export type UserProps = ComposedProps & ComponentProps

export const enhance = compose<UserProps, {}>(
    withState<WithStateProps, number, 'counter', 'setCounter'>('counter', 'setCounter', 1),
    withHandlers<UserProps, UserProps>({
        increment: ({ setCounter }) => () => setCounter( n => n + 1 ),
        decrement: ({ setCounter }) => () => setCounter( n => n - 1 )
    })    
)

const User: React.StatelessComponent<UserProps> = ({counter, increment, decrement, name}: UserProps) => (
    <div className='User'>
        {name} : counter : {counter}
        <div>
            <button onClick={increment}> add </button>
            <button onClick={decrement}> remove </button>
        </div>
    </div>
)

export default enhance(User)

I'm using it within index.tsx:

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Provider } from 'react-redux';

import registerServiceWorker from './registerServiceWorker';
import './index.css';

import User from './components/User'

import { createStore } from 'redux';
import { enthusiasm } from './reducers/index';
import { StoreState } from './types/index';

const store = createStore<StoreState>(enthusiasm, {
  enthusiasmLevel: 1,
  languageName: 'TypeScript',
});

ReactDOM.render(
  <Provider store={store}>
    <div>
      <User />
    </div>
  </Provider>,
  document.getElementById('root') as HTMLElement
);
registerServiceWorker();

The above works fine, but if I use the following instead:

<User name='andrew hopkins' />

I get the following error message:

./src/index.tsx
(22,13): error TS2339: Property 'name' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<{}, ComponentState>> & Readonly<{ childr...'.

---

My package.json file:

{
  "name": "ts-rxjs-recompose",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.0.0",
    "react-dom": "^16.0.0",
    "react-redux": "^5.0.6",
    "react-scripts-ts": "2.7.0",
    "recompose": "^0.25.1",
    "redux": "^3.7.2"
  },
  "scripts": {
    "start": "react-scripts-ts start",
    "build": "react-scripts-ts build",
    "test": "react-scripts-ts test --env=jsdom",
    "eject": "react-scripts-ts eject"
  },
  "devDependencies": {
    "@types/enzyme": "^2.8.9",
    "@types/jest": "^21.1.1",
    "@types/node": "^8.0.31",
    "@types/react": "^16.0.7",
    "@types/react-dom": "^15.5.5",
    "@types/react-redux": "^5.0.9",
    "@types/recompose": "^0.24.2",
    "enzyme": "^3.0.0",
    "react-addons-test-utils": "^15.6.2"
  }
}

Answer 1

The solution was to use ComponentProps for the TOutter type for compose:

export const enhance = compose<UserProps, ComponentProps>(

This is because, looking at the type definition for compose

export function compose<TInner, TOutter>(
        ...functions: Function[]
    ): ComponentEnhancer<TInner, TOutter>;

I was passing through UserProps as the TInner, but an empty object for the TOutter, enhanced, component, causing the error.

EDIT: To expand on the answer, TOutter is the type for the outer copmonent, which in this case is the one that will receive the name props, i.e, the <User /> component used in index.tsx. TInnerexpects a type for inner component that will receive all the props created using recompose, in this case the User component within ./components/User.tsx.