Линтер ругается на отсутствие свойств

Question

При вызове компонента, в котором есть «connect» из «redux» и свойств, которые необходимо передать при вызове, линтер ругается на отсутствие свойств

Component1

interface Component1Props {
   id: numbers;
   users: any[];
}

const Component1: React.FC<Component1Props> = ({
  id,
  users
}) => {
  ...
};


const mapStateToProps = ({ users }: any) => ({
  users
});

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

Компонент2

import Component1 from ...

const Component2 = () => {
  return <Component1 id={id} />; <-- linter error: property 'users' is missing
}

Как это исправить?

Answer 1

Вы можете использовать этот подход из их официального документа

typing-the-connect-выше-order-component

ConnectedProps

Используйте тип ConnectedProps<T>, экспортированный с помощью @types/react-redux^7.1.2, чтобы автоматически выводить типы реквизита из connect.

import { connect, ConnectedProps } from 'react-redux'

interface RootState {
}
const mapState = (state: RootState) => ({
})
const mapDispatch = {
}
const connector = connect(mapState, mapDispatch)

type PropsFromRedux = ConnectedProps<typeof connector>
type Props = PropsFromRedux & {
  backgroundColor: string
}

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