reactjs - 当我尝试传递其他 Prop 时，为什么 typescript 会触发使用其余 Prop 的HOC错误？

我已经编写了一个包装器，通过注入存储道具将组件连接到存储。包装器代码工作正常并通过测试。

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;

然而，在我的一次测试中

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

导致typescript错误Type 'PropsWithChildren<InjectedStoreProps>' has no property 'otherProp' and no string index signature.
我是打字新手，所以肯定是误会了什么。我试过很多谷歌搜索的东西，但都没有帮助。
反应v16.8.6
Typescript 3.4.3版

最佳答案

问题是您试图解构（https://basarat.gitbooks.io/typescript/docs/destructuring.html）一个没有属性otherProp的对象。您可以通过添加它来解决这个问题：

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