当混合Redux状态道具时，获取VS代码以正确检测React Props

Question

有一个 react中的好示例-REDUX文档关于如何构建将从Redux和其父级组件接收prop的功能组件：

这是来自该示例。请注意，我更名为组件mycomponent2，因为我已经有一个叫MyComponent：

import * as React from 'react'
import { connect } from 'react-redux'

interface StateProps {
  isOn: boolean
}

interface DispatchProps {
  toggleOn: () => void
}

interface OwnProps {
  backgroundColor: string
}

type Props = StateProps & DispatchProps & OwnProps

const mapState = (state: StateProps) => ({
  isOn: state.isOn,
})

const mapDispatch = {
  toggleOn: () => ({ type: 'TOGGLE_IS_ON' }),
}

const MyComponent2 = (props: Props) => (
  <div style={{ backgroundColor: props.backgroundColor }}>
    <button onClick={props.toggleOn}>
      Toggle is {props.isOn ? 'ON' : 'OFF'}
    </button>
  </div>
)

// Typical usage: `connect` is called after the component is defined
export default connect<StateProps, DispatchProps, OwnProps>(
  mapState,
  mapDispatch
)(MyComponent2)

但是，当我尝试在另一个组件中使用该组件时，VS代码正在抱怨此组件属性：

​代码还是VS代码变得困惑？无论如何，解决此问题的正确解决方案是什么？

为了完成，这是父组件的代码。请注意，这是一个类组件，我正在寻找一个解决方案，在该解决方案中，孩子组件最终也将是一个类组件：

import * as React from 'react'
import { connect } from 'react-redux'
import MyComponent2 from '../MyComponent2'

interface IMyMainComponentProps {
  name: string,
  color: string
}

interface IMyMainComponentState {
  humor: string
};

const mapStateToProps = (state: IMyMainComponentState) => ({
})

const mapDispatchToProps = {
};

@connect(mapStateToProps, mapDispatchToProps)
export class MyMainComponent extends React.Component<IMyMainComponentProps, IMyMainComponentState> {
  constructor(props?: IMyMainComponentProps) {
    super(props);

    this.state = {
      humor: 'happy'
    }
  }

  render() {
    return(
      <div>
        <h1>{this.props.name}</h1>
        <div>
          {this.props.color}
        </div>
        <div>
          <MyComponent2 backgroundColor='white' />
        </div>
      </div>
    );
  }
}

update：

我让mycomponent2在codesandbox上显示正常：

所以，我真的不知道我的计算机上的VS代码有什么不同：

https：//codesandbox.io/s/redux-toolkit-class-class-class-class-class-complas-class-components-forked-forked-forked-js2e2e2e2e2h?file = /src/app.tsx