Typescript и Redux - ошибки при работе с макетом приложения по умолчанию в Visual Studio 2017

Question

Итак, я создаю веб-форму для запроса на разработку мобильных приложений. Эта форма будет получать информацию о мобильных приложениях от пользователей и сохранять ее, чтобы разработчики могли рассмотреть запрос позже.

Я не очень знаком с Redux и Typescript, но я решил пойти с проектом шаблона VS React, чтобы сэкономить время, начав работу над этим, и который использует React, Redux и Typescript. Тем не менее, до сих пор у меня не было никаких проблем. Я создал страницу со списком и начал работать над страницей, которая позволяет вам фактически создать новый запрос.

Страница создания запроса доступна через React Router. Он указан конкретно как маршрут, и в навигации по странице есть ссылка, которая позволяет открыть страницу создания. Вот страница создания:

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

type CreateAppRequestProps =
    AppRequestStore.AppRequestState
    & typeof AppRequestStore.actionCreators
    & RouteComponentProps<{}>;

class CreateAppRequest extends React.Component<CreateAppRequestProps, {}> {
    constructor() {
        super();

        this.Continue = this.Continue.bind(this);
    }

    componentWillMount() {
        // This method runs when the component is first added to the page
        this.props.create();
    }

    Continue(e:any) {
        this.props.begin();
    }

    public render() {
        let content;

        if (!this.props.appRequestBegun) {
            content = <div>
                <p>Please have all relevant info ready for reference before beginning the app request process.</p>
                <p>
                    {this.props.currentAppRequest ? this.props.currentAppRequest.CurrentSectionId : ''}
                </p>
                <p>
                    {this.props.currentAppRequest ? this.props.currentAppRequest.AppRequestSections.map(thing => thing.SectionType.Name) : ''}
                </p>
                <button value="Continue" onClick={this.Continue}>Continue</button>
                </div>
        }
        else
        {
            content = <DeveloperAccounts />
        }

        return <div>
            <h3 className="elementor-icon-box-title">Create App Request</h3>

            {content}
        
        </div>;
    }
}


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

Это отлично работает! Я могу получить доступ к состоянию Redux, которое успешно использует бэкэнд-API, чтобы перенести живые данные на страницу, весь этот джаз. Пока все отлично работает. Но теперь я хочу добавить свой первый подкомпонент на эту страницу, и я

встречаются с ошибками, которые я не понимаю. Это ссылка на компонент на странице создания.

DeveloperAccounts - это просто тупой компонент с каким-то голым HTML-кодом прямо сейчас. Я больше ничего не делал, потому что хотел добавить работающий субкомпонент внутри страницы создания, прежде чем добавлять реальные вещи. Все, что я сделал, это взял копию страницы создания и переименовал ключевые переменные (имя класса и т. Д.):

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

type DeveloperAccountsProps =
    AppRequestStore.AppRequestState
    & typeof AppRequestStore.actionCreators;

class DeveloperAccounts extends React.Component<DeveloperAccountsProps, {}> {
    constructor() {
        super();

    }

    public render() {
        return <div>
        Developer Accounts
            
        </div>;
    }
}

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

Это дает мне следующую ошибку:

ОШИБКА в [at-loader] ./ClientApp/components/CreateAppRequest.tsx:64:17 TS2322: тип '{}' нельзя назначить типу IntrinsicAttributes & IntrinsicClassAttributes & Readonly <{children ?: ReactNo ... '. Тип «{}» нельзя назначить типу «Только чтение». Свойство «appRequests» отсутствует в типе «{}». </p>

appRequests - это свойство основного состояния приложения, которое является частью типа props для этого класса. Из-за ошибки мне кажется, что компонент ожидает, что все в applicationState будет ему передано, но я не знаю, как это произойдет. У меня нет реквизитов для передачи компоненту, и я просто хочу, чтобы он все равно был подключен к основному состоянию приложения с помощью метода connect, как на странице создания.

Я сделал одно изменение в интерфейсе реквизита для этого компонента. Тип реквизита страницы создания также включает RouteComponentProps <{}>, я полагаю, потому что на эту страницу ссылается маршрутизатор. Но так как этот дочерний компонент не включен как маршрут, я думал, что реквизиты компонента маршрута не должны быть включены.

В любом случае, я понятия не имею, почему этот, казалось бы, простой компонент выдает такие непостижимые ошибки. Буду очень признателен за помощь.