Visual Studio 2017 创建的 React-Redux 应用程序在 Visual Studio Code 中出现编译错误答案

【问题标题】：React-Redux application created by Visual Studio 2017 gives compile errors in Visual Studio CodeVisual Studio 2017 创建的 React-Redux 应用程序在 Visual Studio Code 中出现编译错误
【发布时间】：2018-03-16 09:08:42
【问题描述】：

我通过选择 Visual Studio 2017 中提供的 React-Redux 模板创建了一个示例应用程序。

当我使用 Visual Studio 2017 IDE 时，示例代码按预期编译和运行。但是当我使用 Visual Studio Code 时，某些文件会出现编译时错误。一个这样的错误示例代码文件“FetchData.tsx”如下：

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;

在线 (FetchData) as typeof FetchData; 我在 Visual Studio 代码 中收到以下错误，但在 Visual Studio 2017 中却没有：

类型“typeof FetchData”不可分配给类型“StatelessComponent”。类型 'typeof FetchData' 不匹配签名 '(props: WeatherForecastsState & { children?: ReactNode; }, context?: any): ReactElement |空'。

对此的任何帮助表示赞赏。谢谢。

【问题讨论】：

标签： reactjs asp.net-mvc visual-studio visual-studio-code react-redux

【解决方案1】：

我找不到代码在 VS2017 上运行而不在 Visual Studio 代码上运行的原因。因此，作为一种解决方法，我必须将 react-redux Connect 方法的参数拆分如下，它按预期工作：

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

改为

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);

【讨论】：