Подключение Parent и Child к хранилищу Redux вызывает ошибку Typescript, когда реквизиты потомка не передаются в месте его объявления

Question

У меня, на самом деле, работают мои компоненты, и я знаю, что есть другой способ достижения того же результата путем передачи реквизита от Родителя к Ребенку.Но я все еще спрашиваю ради понимания - это просто «особенность» TypeScript или я не понимаю некоторые концепции?

Итак, есть родительский компонент, связанный с хранилищем Redux, и у него есть дочерний элемент,Вот метод визуализации Parents:

render() {
const { isAuthenticated, ... } = this.props;

return (
        ...
        <AccountMenu isAuthenticated={isAuthenticated} />
        ...
);

Вот дочерний элемент (я удалил несвязанный код):

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { IRootState } from 'app/shared/reducers';
import { AccountCircle } from '@material-ui/icons';
import { IconButton, Menu, MenuItem } from '@material-ui/core';
import { Link } from 'react-router-dom';

export interface IAccountMenuState {
  anchorEl: boolean;
}

class AccountMenu extends Component<StateProps, IAccountMenuState> {
  state = {
    anchorEl: null
  };

  render() {
    return (
      <div>
        <Menu id="simple-menu" anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={this.handleClose}>
          {isAuthenticated ? (
            <MenuItem onClick={this.handleClose} component={logout}>
              Logout
            </MenuItem>
          ) : (
            <MenuItem onClick={this.handleClose} component={login}>
              Login
            </MenuItem>
          )}
        </Menu>
      </div>
    );
  }
}

const mapStateToProps = ({ authentication }: IRootState) => ({
  isAuthenticated: authentication.isAuthenticated
});

type StateProps = ReturnType<typeof mapStateToProps>;

export default connect(
  mapStateToProps,
  null
)(AccountMenu);

Как видно из компонента Child, я получаю доступ к свойству isAuthenticatedнепосредственно из хранилища Redux и для компонента установлен тип StateProps:

class AccountMenu extends Component<StateProps, IAccountMenuState> {

Установка этого параметра выше не позволяет мне добавить этот дочерний элемент в родительский элемент без передачи isAuthenticated в качестве подпорки.Таким образом, это в компоненте Parent не будет работать:

return (
        ...
        <AccountMenu/>
        ...
);

Что мне делать в таких случаях: когда мой компонент напрямую подключен к хранилищу Redux, поэтому требуемое значение берется оттуда, но TypeScript по-прежнемузаставляет меня передать то же значение из родительского компонента.В противном случае проверка типа не пройдена, и я получаю сообщение об ошибке:

TS2322: тип «{}» не может быть назначен типу «Только чтение».Свойство 'isAuthenticated' отсутствует в типе '{}'

В качестве обходного пути я могу просто добавить isAuthenticated = {isAuthenticated} в качестве реквизита для дочернего компонента.Но в этом случае я не понимаю, какое значение используется в дочернем компоненте: то, которое я передал из Parent, или то, что из Store, на которое я ссылаюсь напрямую?Я уверен, что это значение из хранилища, которое используется при его изменении, но каково начальное значение для Child, я не уверен.

Answer 1

Попробуйте это в ваших реквизитах:

export interface IAccountMenuState {
  anchorEl?: boolean;
  isAuthenticated?: any;
}