如何在react-typescript的HOC中设置道具类型？

Question

我有一个简单的withAuth HOC。我正在尝试定义道具的类型。

const withAuth = (Component: typeof React.Component) => (role: string) => {
  return (props) => {
    const { data, loading } = useGetUser();
    if (loading) {
      return <p>Loading...</p>;
    }

    if (!data) {
      return <Redirect ssr to="/api/v1/login" />;
    } else {
      if (role && !isAuthorized(data, role)) {
        return <Redirect ssr to="/api/v1/login" />;
      }

      return <Component user={data} loading={loading} {...props} />;
    }
  };
};

我试过这个：

React.Component<T>

然后将T传递给props:T，我收到两个警告。

  Component: typeof React.Component<T> // Parameter '(Missing)' implicitly has an 'any' type.

 props:T // Cannot find name 'T'

Answer 1

这就是你拥有的：

import React, { FC } from 'react'

type Props = {
  name: string
}

const A: FC<Props> = () => <div></div>


const withAuth = <P extends object>(Component: React.ComponentType<P>) => (role: string) => {
  return (props: P) => {
    return <Component {...props} />;
  }
};

const result1 = withAuth(A)('hello')({ label: 'hello' }) // error
const result2 = withAuth(A)('hello')({ name: 'hello' }) // ok