为什么连接的类组件道具无法直接访问？

Question

我正在尝试使用componentDidMount方法访问道具，但显示错误为：

Property 'addressInvalid' does not exist on type 'Readonly<Props> & Readonly<{ children?: ReactNode; }>'.

请参考以下代码：

import React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import {
  withStyles,
  WithStyles,
  Theme,
  createStyles,
} from '@material-ui/core/styles';
import { applicantFormSubmit } from '../../auto/redux/actions';
import { get } from 'lodash';

interface AppState {
  details: string;
}

interface DispatchProps {
  applicantFormSubmit: (data: any) => void;
}

interface StateProps {
  applicant: {
    formLoader: boolean;
    addressInvalid: boolean;
    personal_details: Object;
    address: Object;
  };
  quote: {
    quoteCompleted: boolean;
  };
}

const styles = (theme: Theme) =>
  createStyles({
    icon: {
      fontSize: '35px',
    },
    continueSpinner: {
      color: 'white !important',
      marginBottom: '2px',
    },
  });

interface MyProps extends StateProps, DispatchProps {}

class TempComponent extends React.Component<MyProps, AppState> {
  componentDidMount() {
    //console.log('did mount this.props');
    //console.log(this.props); // showing all props properly
    //console.log(this.props.addressInvalid); //<-show Error as mentioned above
  }

  render() {
    return <div>Hello my name TempComponent</div>;
  }
}

const mapStateToProps = (state: StateProps) => {
  const {
    formLoader,
    addressInvalid,
    personal_details,
    address,
  } = state.applicant;
  const { quoteCompleted } = state.quote;

  return {
    formLoader,
    addressInvalid,
    personal_details,
    address,
    quoteCompleted,
  };
};

const mapDispatchToProps = (dispatchProp: any): DispatchProps => {
  return bindActionCreators(
    {
      applicantFormSubmit,
    },
    dispatchProp.dispatch
  );
};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(withStyles(styles)<any>(TempComponent));