ReactJS - קבלת מצב התחלתי עם Redux ב-TypeScript


אני מתקשה עם TypeScript, במיוחד עם dotnet new react-redux של מיקרוסופט.

אני מנסה לקרוא לפעולה בהפעלה כדי לבדוק אם משתמש מחובר או לא, אבל TypeScript לא אוהב את זה ואני לא מבין את השגיאה.

הנה קוד העיצוב:

import * as React from "react";
import { NavMenu } from "./NavMenu";
import { connect } from "react-redux";
import * as AuthStore from "../store/Auth";

type LayoutProps = typeof AuthStore.actionCreators;

class Layout extends React.Component<LayoutProps, {}> {
  componentDidMount() {
    this.props.getLoggedInUser();
  }
  public render() {
    return (
      <div className="container-fluid">
        <div className="row">
          <div className="col-sm-3">
            <NavMenu />
          </div>
          <div className="col-sm-9">{this.props.children}</div>
        </div>
      </div>
    );
  }
}

export default connect(null, AuthStore.actionCreators)(Layout) as typeof Layout;

וזהו קוד הנתיבים שגורם לבעיה.

import * as React from "react";
import { BrowserRouter, Route } from "react-router-dom";
import Layout from "./components/Layout";
import Home from "./components/Home";
import FetchData from "./components/FetchData";
import Counter from "./components/Counter";
import SignUp from "./components/SignUp";
import SignIn from "./components/SignIn";

export const routes = (
  <Layout>
    <div>
      <Route exact path="/" component={Home} />
      <Route path="/counter" component={Counter} />
      <Route path="/fetchdata/:startDateIndex?" component={FetchData} />
      <Route path="/signup" component={SignUp} />
      <Route path="/signin" component={SignIn} />
    </div>
  </Layout>
);

השגיאה שאני מקבל היא:

TS2322: Type '{ children: Element; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Layout> & Readonly<{ children?: ReactNode; }> & Re...'