typescript-3.3.3-error.tsx

import React from 'react';
import {
  typedConnect,
  createPropsMapper,
  PropsOf
} from 'react-redux-typed-connect';



export function makeTestComponent<E,RS>(getEntity:(state:RS, id:string) => E | undefined) {
  type Props = PropsOf<typeof propsMapper>;
  class TestComponent extends React.Component<Props> {
    render() {
      return (
        <div>
          {JSON.stringify(this.props.entity)}
        </div>
      );
    }
  }
  const propsMapper = createPropsMapper({
    fromState: (state:RS, ownProps:{id?:string}) => ({
      entity: ownProps.id ? getEntity(state, ownProps.id) : undefined
    }),
    actions: () => ({})
  });
  return typedConnect(propsMapper)(TestComponent);
}

interface Dummy {
  id: string;
  dummy: string;
}
interface RootState {
  dummies: {
    [id:string]: Dummy | undefined
  };
}

function getDummy(state:RootState, id:string) {
  return state.dummies[id];
}
export const tc = makeTestComponent(getDummy);

/*

test.tsx(27,36)
      TS2345: Argument of type 'typeof TestComponent' is not assignable to parameter of type 'ComponentType<Matching<{ entity: E | undefined; }, { entity: E | undefined; } & { id?: string | undefined; }>>'.
  Type 'typeof TestComponent' is not assignable to type 'ComponentClass<Matching<{ entity: E | undefined; }, { entity: E | undefined; } & { id?: string | undefined; }>, any>'.
    Type 'TestComponent' is not assignable to type 'Component<Matching<{ entity: E | undefined; }, { entity: E | undefined; } & { id?: string | undefined; }>, any, any>'.
      Types of property 'props' are incompatible.
        Type 'Readonly<{ children?: ReactNode; }> & Readonly<{ entity: E | undefined; } & { id?: string | undefined; }>' is not assignable to type 'Readonly<{ children?: ReactNode; }> & Readonly<Matching<{ entity: E | undefined; }, { entity: E | undefined; } & { id?: string | undefined; }>>'.
          Type 'Readonly<{ children?: ReactNode; }> & Readonly<{ entity: E | undefined; } & { id?: string | undefined; }>' is not assignable to type 'Readonly<Matching<{ entity: E | undefined; }, { entity: E | undefined; } & { id?: string | undefined; }>>'.
            Types of property 'entity' are incompatible.
              Type 'E | undefined' is not assignable to type 'E | undefined extends E | undefined ? E | undefined : E | undefined'.
                Type 'undefined' is not assignable to type 'E | undefined extends E | undefined ? E | undefined : E | undefined'.

*/