reactjs - Varför utlöser TypeScript ett fel i min HOC som använder rest-egenskaper när jag försöker skicka en annan egenskap?

Jag har skrivit ett wrapper för att ansluta komponenter till en store genom att injicera en store-prop. Wrapper-koden fungerar korrekt och klarar testerna.

import React, { ComponentType } from 'react';
import store from './index';
import { RootStore } from './RootStore';

interface InjectedStoreProps {
  store: RootStore;
}

const withStore = (WrappedComponent: ComponentType<InjectedStoreProps>) => {
  const output = ({...props}) => <WrappedComponent store={store} {...props} />;
  return output;
}

export default withStore;

Men i ett av mina tester har jag

const ComponentToWrap = withStore(
  ({store, otherProp}) => (
    <div>
      <span>
        {store}
      </span>
      <span>
        {otherProp}
      </span>
    </div>
  )
);

vilket orsakar TypeScript-fel Typen 'PropsWithChildren<InjectedStoreProps>' har ingen egenskap 'otherProp' och ingen strängindexsignatur.

Jag är ny på TypeScript, så jag kan definitivt missförstå något. Jag har försökt saker från många Google-sökningar men ingen av dem har hjälpt.

React v16.8.6 Typescript v3.4.3

Svar #1

Problemet är att du försöker dekonstruera (https://basarat.gitbooks.io/typescript/docs/destructuring.html) ett objekt som inte har egenskapen otherProp. Du kan fixa det genom att lägga till den:

interface InjectedStoreProps {
  store: RootStore;
  otherProp: any;
}