类型“{}”中缺少属性“x”，但类型“Pick”中需要<Interface, "x"> &#39;。 TS2741

Question

I am trying to pass some things from redux store to a component with connect . This is my code:

Parent:

export const MainPage = (
  {
    count,
    handleIncrementClick,
    selectedOfferId,
  }: MainPageProps,
): React.ReactElement => {
  const handleClick = (): Function => handleIncrementClick(count + 1);
  return (
    <div>
      <h1 data-testid="FirstH1">{`Selected offer: ${selectedOfferId}`}</h1>
      <button onClick={handleClick} type="button">
        {`Klikłeś  ${count}  razy`}
      </button>
      <OffersContainer /> {/* It throws the error here */}
    </div>
  );
};

Child:

• Container:

   const mapStateToProps = (state: globalStateType) => ({ dataset: state.offersDataSet, }); const mapDispatchToProps = (dispatch: Dispatch): FSetSelectedOfferIdInterface => ({ FSetSelectedOfferId: ( selectedOfferId: selectedOfferIdType, ) => dispatch(setSelectedOfferId(selectedOfferId)), }); export const OffersContainer = connect(mapStateToProps, mapDispatchToProps)(OffersComponent);

• Component:

   export const OffersComponent = ({ offersDataSet }: OffersPropsInterface): ReactElement => ( <> {offersDataSet.map(({ id, firstName, city, price, image, description, }): React.ReactElement => ( <FlexWrapper key={id.$oid}> <OfferContainer id={id} firstName={firstName} city={city} price={price} image={image} description={description} /> </FlexWrapper> ))} </> );

OffersPropsInterface:

export interface OffersPropsInterface {
  offersDataSet: OfferPropsInterface[];
}

OfferPropsInterface:

export interface OfferPropsInterface {
  id: {'$oid': string};
  firstName: string;
  city: string;
  price: number;
  image: string;
  description: string;
}

This seems like a simple problem, but for some reason I get this error:

Property 'offersDataSet' is missing in type '{}' but required in type 'Pick<OffersPropsInterface, "offersDataSet">'. TS2741

Why though? I'm not rendering the component, instead I'm rendering the container, which requires only the offersDataSet as an array, which is provided through redux. How can I make it so that the offersDataSet is mandatory, but only for redux, not for rendering? Or is the problem something entirely different?

Answer 1

Ok I'm stupid. I was assigning the redux data to a wrong name. Here:

const mapStateToProps = (state: globalStateType) => ({
   dataset /* This should've been offersDataSet.*/: state.offersDataSet,
 //^^^ offersDataSet
});

Now I know why I need types for everything...