Typescript error in ReactRedux template when upgrading to latest React/Redux libraries

[RonPenton]

I installed a new project using:

dotnet new reactredux

Since I want to use React 16, I went ahead and updated the package.json to the following versions:

"dependencies": {
    "@types/history": "^4.6.0",
    "@types/react": "^16.0.8",
    "@types/react-dom": "^16.0.0",
    "@types/react-hot-loader": "^3.0.4",
    "@types/react-redux": "^5.0.10",
    "@types/react-router": "^4.0.15",
    "@types/react-router-dom": "^4.0.8",
    "@types/react-router-redux": "^5.0.8",
    "@types/webpack": "^3.0.12",
    "@types/webpack-env": "^1.13.1",
    "aspnet-prerendering": "^3.0.1",
    "aspnet-webpack": "^2.0.1",
    "aspnet-webpack-react": "^3.0.0",
    "awesome-typescript-loader": "^3.2.3",
    "bootstrap": "^3.3.7",
    "css-loader": "^0.28.7",
    "domain-task": "^3.0.3",
    "event-source-polyfill": "0.0.9",
    "extract-text-webpack-plugin": "^3.0.1",
    "file-loader": "^1.1.4",
    "history": "^4.7.2",
    "jquery": "^3.2.1",
    "json-loader": "^0.5.7",
    "node-noop": "^1.0.0",
    "react": "^16.0.0",
    "react-dom": "^16.0.0",
    "react-hot-loader": "^3.0.0-beta.7",
    "react-redux": "^5.0.6",
    "react-router-dom": "^4.2.2",
    "react-router-redux": "^5.0.0-alpha.6",
    "redux": "^3.7.2",
    "redux-thunk": "^2.2.0",
    "style-loader": "^0.19.0",
    "typescript": "^2.5.3",
    "url-loader": "^0.5.9",
    "webpack": "^3.6.0",
    "webpack-hot-middleware": "^2.19.1",
    "webpack-merge": "^4.1.0"
}

These are the newest versions of all of these libraries.

Unfortunately the TypeScript fails to compile anymore. This line in Counter.tsx fails:

// Wire up the React component to the Redux store
export default connect(
    (state: ApplicationState) => state.counter, // Selects which state properties are merged into the component's props
    CounterStore.actionCreators                 // Selects which action creators are merged into the component's props
)(Counter) as typeof Counter;

The compiler complains that the resulting datatype lacks the 'count' property and thus cannot be cast to Counter. I tried debugging the types of the various steps in that call, but I was unsuccessful at understanding the complexity of the types involved.

Before giving up, I added an as any cast before as typeof Counter, to fool the compiler into letting it happen. It worked, it compiled, and the example runs.

My question is:

1. Are the type definitions wrong?
2. Or is this template using a pattern that the react-redux library does not want us to use?

[SteveSandersonMS]

Sorry to hear it's been tricky to upgrade to React 16.

As part of the ASP.NET Core 2.1 release we'll be updating all the templates and hence will figure out any details like this as part of that update process. Until then I'm afraid if you want to change your set of third-party dependencies then it will be up to you to resolve any compatibility issues. So right now I don't know what breaking changes might have been introduced in the type definitions you're trying to upgrade to, but it's something we will address when we update for 2.1. Hope that's OK!