Javascriptservices: Typescript error when using component in React+Redux sample

[AleksandrAlbert]

When using the default Redux+React template, placing a component passed through the connect function into jsx causes TypeScript to throw an error:

Usage:

import Counter from './Counter'

export default class Home extends React.Component<RouteComponentProps<{}>, {}> {
    public render() {
        return <div>
            <Counter /> // <-- Throws error
             ...
        </div>;
    }
}

Error   TS2322  (TS) Type '{}' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Counter> & Readonly<{ children?: ReactNode; }> & R...'.
  Type '{}' is not assignable to type 'Readonly<CounterProps>'.
    Property 'count' is missing in type '{}'. 

I am able to stop this error by changing the type assertion of the connect function to any as follows:

export default connect(
     ...
)(Counter) as any

Is this expected behaviour?

[SteveSandersonMS]

Yep, TypeScript became stricter, changing what was valid code. Your fix is sufficent.

The next version of the React template does not use TypeScript, so this issue does not apply to the latest code, so I'll close it. In effect it is resolved.

[AleksandrAlbert]

Oh, that's a bummer. Could I ask why the change from TS? Most of us would have been using TS up until now I assume. Is there an issue open on this?

[SteveSandersonMS]

Simply because create-react-app produces JS-based projects. Please see https://github.com/aspnet/JavaScriptServices/issues/1441#issuecomment-351967902 for more info.

[AleksandrAlbert]

Thanks for the info, perhaps we could have a branch for a TS port of what gets generated by CRA, could be community driven.