使用 HoC 时如何正确分配通用道具？

Question

所以我有一个组件，这个组件被传递给一个 HOC，它应该增强原始组件。

我为组件正在接收的道具声明了一个类型，但我仍然收到错误“TS2741”，它说：

Property 'auth' is missing in type '{}' but required in type 'AppProps'

我写了一个小例子，你可以在这里看到： https://stackblitz.com/edit/react-ts-huaq8s

所以我的猜测是，TypeScript 从withAuth 的返回函数中检查props 是否具有通过我们的类型声明的属性。这只会失败，因为我们正在检查的属性是稍后添加的（通过<WrappedComponent ... />）

根据我目前的知识，我猜我必须以某种方式告诉 TypeScript，应该检查返回的 WrappedComponent 是否有 P。但我不知道该怎么做。

所以很明显，在我问这个问题之前，我在论坛里看了很多网上的文章和一些问题，但还是找不到答案。

有人可以帮帮我吗？

Answer 1

我相信您只需要将 AppProps 类型传递给 withAuth，否则您声明的泛型不会被使用。

即：

const AppWithAuth = withAuth<AppProps>(App)

这是你要找的吗？

https://stackblitz.com/edit/react-ts-uxhgql?file=index.tsx

Answer 2

所以这可能有点复杂，我不能 100% 确信这确实是正确的方法，但这里就是这样。

这里的目标是在 HOC 中包装一个需要 auth 属性的常规组件，该 HOC 将提供该 auth 属性。为此，您需要将您的 withAuth 参数实际上是一个需要 auth 的组件（正如 App 所做的那样），而您的结果将是一个不需要的组件。

以下是实现这一目标的方法：

type Omit<T,U> = Pick<T, Exclude<keyof T, U>>; // This is standard since 3.5

interface AuthProps {
  auth: TAuthProviderUtils
}

function withAuth<P extends AuthProps>(WrappedComponent: ComponentType<P>) : ComponentType<Omit<P,keyof AuthProps>> {
  return (props: Omit<P,keyof AuthProps>) => (
    <AuthContext.Consumer>
      {auth => <WrappedComponent {...props} auth={auth} />}
    </AuthContext.Consumer>
  )
}

// This needs auth
function App<AppProps>({ auth: { user } }) {
  return (
    <div>Hello App</div>
  )
}

const AppWithAuth = withAuth(App); // This does not need auth

Working example