Приложение React-Redux, созданное в Visual Studio 2017, выдает ошибки компиляции в коде Visual Studio

Я создал образец приложения, выбрав шаблон React-Redux, представленный в Visual Studio 2017.

Шаблон для React-Redux

Пример кода компилируется и запускается, как и ожидалось, когда я использую Visual Studio 2017 IDE. Но когда я использую код Visual Studio, я получаю ошибки времени компиляции для некоторых файлов. Один такой ошибочный пример файла кода "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:

Тип typeet FetchData нельзя назначить типу StatelessComponent. Тип 'typeof FetchData' не соответствует подписи '(props: WeatherForecastsState & { children?: ReactNode; }, context?: any): ReactElement | ноль'.

Любая помощь по этому вопросу приветствуется. Благодарю.

1 ответ

Решение

Я не смог найти причину того, почему код работает на VS2017, а не на коде Visual Studio. Итак, в качестве обходного пути мне пришлось разделить параметры для метода Connect-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);
Другие вопросы по тегам