React-Redux application created by Visual Studio 2017 gives compile errors in Visual Studio Code

Question

I created a sample application by selecting React-Redux template provided in Visual Studio 2017.

The sample code compiles and runs as expected when I use Visual Studio 2017 IDE. But when I use Visual Studio Code I get compile time errors for some of the files. One such erroneous sample code File "FetchData.tsx" is as below:

import * as React from 'react';
import { Link, RouteComponentProps } from 'react-router-dom';
import { connect } from 'react-redux';
import { ApplicationState }  from '../store';
import * as WeatherForecastsState from '../store/WeatherForecasts';

type WeatherForecastProps =
    WeatherForecastsState.WeatherForecastsState        // ... state we've requested from the Redux store
    & typeof WeatherForecastsState.actionCreators      // ... plus action creators we've requested
    & RouteComponentProps<{ startDateIndex: string }>; // ... plus incoming routing parameters

class FetchData extends React.Component<WeatherForecastProps, {}> {
    public render() {
        return <div>
            <h1>Weather forecast</h1>
            <p>This component demonstrates fetching data from the server and working with URL parameters.</p>    
        </div>;
    }
}

export default connect(
    (state: ApplicationState) => state.weatherForecasts, // Selects which state properties are merged into the component's props
    WeatherForecastsState.actionCreators                 // Selects which action creators are merged into the component's props
)(FetchData) as typeof FetchData;

On line (FetchData) as typeof FetchData; I get error below in Visual Studio code but NOT IN Visual Studio 2017:

Type 'typeof FetchData' is not assignable to type 'StatelessComponent'. Type 'typeof FetchData' provides no match for the signature '(props: WeatherForecastsState & { children?: ReactNode; }, context?: any): ReactElement | null'.

Any help on this is appreciated. Thanks.

User3250 User3250 · Accepted Answer · 2018-03-29T09:24:13

I couldn't find the reason as to why the code works on VS2017 and not on Visual Studio code. So, as a workaround I had to split the params for react-redux Connect method as below and it worked as expected:

export default connect(
(state: ApplicationState) => state.weatherForecasts,
  WeatherForecastsState.actionCreators
)(FetchData) as typeof FetchData;

CHANGED TO

const mapStateToProps = (state: ApplicationState): WeatherForecastProps => {    
 return {
    forecasts:state.weatherForecasts.forecasts
  } as any
};

const mapDispatchToProps = (dispatch:any): any => {
return bindActionCreators({
    requestWeatherForecasts: 
    WeatherForecastsState.actionCreators.requestWeatherForecasts
  }, dispatch);
};

export default connect(
   mapStateToProps,
   mapDispatchToProps
)(FetchData);

React-Redux application created by Visual Studio 2017 gives compile errors in Visual Studio Code

1 Answers