在 TypeScript 的 Next.js 中创建 HOC withAuth 的最佳方法是什么?
问题:
我有一个 Next.js 应用程序,并且正在使用next-authpackage.json。我正在尝试创建一个 HOC 来包裹实际组件并确定它是否有会话。我也在使用 eslint。这是我的代码:
import { useRouter } from 'next/navigation'; import { useSession } from 'next-auth/react'; type Props = any; const withAuth = (Component: React.ComponentType<Props>) => { const Auth = (props: Props) => { const router = useRouter(); const { status } = useSession({ required: true, onUnauthenticated() { router.push('/welcome/login'); }, }); if (status === 'loading') { return 'Loading ...'; } return <Component {...props} />; }; return Auth; }; export default withAuth;
Eslint 向我发出有关我使用 type 的警告any
。我尝试将这两行更改为使用通用类型的位置:
const withAuth = <P extends {}>(Component: React.ComponentType<P>) => { const Auth = (props: P) => {
但现在它报错了:
Error: Don't use `{}` as a type. `{}` actually means "any non-nullish value". - If you want a type meaning "any object", you probably want `object` instead. - If you want a type meaning "any value", you probably want `unknown` instead. - If you want a type meaning "empty object", you probably want `Record<string, never>` instead. - If you really want a type meaning "any non-nullish value", you probably want `NonNullable<unknown>` instead. @typescript-eslint/ban-types
当我们必须将组件作为 props 传递时,编写 HOC 的最佳方法是什么?我不知道它会是什么样的组件
解决方案或解答
一般来说,TypeScript 建议不要使用{}作为泛型类型约束,因为它不会施加任何类型检查约束,因此它本质上与使用 一样宽松any。
您可以使用unknownorRecord<string, unknown>来获得更好的类型安全性,并且 ESLint 错误也不会弹出。
这些类型基本上假设您不知道该对象将采用什么形状,但它不会是nullor undefined,使其足够灵活以包装任何组件。
所以在你的情况下:文章来源:https://www.toymoban.com/diary/problem/381.html
const withAuth = <P extends Record<string, unknown>>( Component: React.ComponentType<P> ): React.FC<P> => { const Auth: React.FC<P> = (props) => { const router = useRouter(); const { status } = useSession({ required: true, onUnauthenticated() { router.push('/welcome/login'); }, }); if (status === 'loading') { return 'Loading ...'; } return <Component {...props} />; }; return Auth; }; export default withAuth;
所以在这里, props 参数的类型不是 ,any而是 类型P,这是我们限制为 的泛型类型Record<string, unknown>。文章来源地址https://www.toymoban.com/diary/problem/381.html
到此这篇关于在 TypeScript 的 Next.js 中创建 HOC withAuth 的最佳方法是什么?的文章就介绍到这了,更多相关内容可以在右上角搜索或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!