在 TypeScript 的 Next.js 中创建 HOC withAuth 的最佳方法是什么?

在 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,使其足够灵活以包装任何组件。

所以在你的情况下:

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模板网!

原文地址:https://www.toymoban.com/diary/problem/381.html

如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请联系站长进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用
使用Spring Boot和LangChain构建Java中的AI ChatGPT仿制教程
上一篇 2023年10月12日 09:55
下一篇 2023年10月12日 10:26

相关文章

  • 为什么选择 Next.js 框架?

    Next.js 框架作为一种强大而受欢迎的工具,为开发人员提供了许多优势和便利。本文将探讨 Next.js 框架的优点,并解释为什么选择 Next.js 是一个明智的决策。 文档:https://nextjs.org/docs Next.js 框架提供了先进的服务端渲染(SSR)和静态生成(SSG)能力,使得我们能够在服务器上生

    2024年02月12日
    浏览(50)
  • 前端食堂技术周刊第 85 期:5 月浏览器更新、TypeScript 5.1、Rspack 0.2.0、Parcel v2.9.0、Next.js 企业级模板

    美味值:🌟🌟🌟🌟🌟 口味:龙井酥 食堂技术周刊仓库地址:https://github.com/Geekhyt/weekly 5 月登陆浏览器的新功能 TypeScript 5.1 Rspack 0.2.0 Parcel v2.9.0 Next.js 企业级模板 SupportsCSS useHooks 大家好,我是童欧巴。欢迎来到前端食堂技术周刊,我们先来看下上周的技术资讯。 Firefox 1

    2024年02月08日
    浏览(49)
  • 在 React+Typescript 项目环境中创建并使用组件

    上文 React+Typescript清理项目环境 我们将自己创建的项目环境 好好清理了一下 下面 我们来看组件的创建 组件化在这种数据响应式开发中肯定是非常重要的。 我们现在src下创建一个文件夹 叫 components 就用他专门来处理组件业务 然后 我们在下面创建一个 hello.tsx 注意 是tsx 别习

    2024年02月12日
    浏览(49)
  • React-Hoc高阶组件与css-in-js技术

    目录 一、什么是React-Hoc 二、什么是高阶组件 三、什么是css-in-js技术 React-HOC(Higher-Order Component,高阶组件)是React中一种用于重用组件逻辑的模式。它本质上是一个函数,接受一个组件作为参数并返回一个新的组件。 HOC可以用于在不修改原始组件的情况下,为组件添加额外

    2024年01月24日
    浏览(45)
  • 华为OD机试 - 最佳的出牌方法(Java & JS & Python)

    题目描述 手上有一副扑克牌,每张牌按牌面数字记分(J=11,Q=12,K=13,没有大小王),出牌时按照以下规则记分: 出单张,记牌面分数,例如出一张2,得分为2 出对或3张,记牌面分数总和再x2,例如出3张3,得分为(3+3+3)x2=18 出5张顺,记牌面分数总和再x2,例如出34567顺,得分为

    2024年02月12日
    浏览(47)
  • Redux Toolkit+TypeScript最佳实践

    Redux-Toolkit是为了简化使用Redux繁琐的步骤,可以j降低使用useReducer与useContext管理状态的频率,而且起到项目中状态管理规范和约束化的效果。 阅读本文需要的前置知识:React、Redux、Typescript、Redux hooks。 目前使用Redux-Toolkit管理消费redux状态的方式。举个例子,假设我们现在的

    2024年04月08日
    浏览(43)
  • 掌握TypeScript:10个最佳实践提高代码质量

    TypeScript 是一种强类型的 JavaScript 超集,提供了很多优秀的工具和语言特性,可以帮助开发者提高代码质量和开发效率。在本文中,我们将介绍 10 个 TypeScript 最佳实践,帮助初级和中级的 Web 前端开发工程师更好地使用 TypeScript 开发高质量的代码。 在 TypeScript 中,严格模式可

    2023年04月11日
    浏览(46)
  • next.js报错点

    解决方案 1.大概是引用的组件和本组件重名了,换成其他的就可以 解决方案 我一开始定义的navs是数组类型。 在React中,void[] 是一个数组,它没有元素。由于它没有元素,所以不能将其分配给 ReactNode 类型。 在React中,ReactNode 是所有允许的子节点的类型标签。这两个类型不兼

    2024年02月11日
    浏览(51)
  • Next.js基础语法

    _app.tsx是项目的入口组件,主要作用: 可以扩展自定义的布局(Layout) 引入全局的样式文件 引入Redux状态管理 引入主题组件等等 全局监听客户端路由的切换 Next.js默认是没有配置路径别名的,我们可以在ts.config.json中配置模块导入的别名: baseUrl :配置允许直接从项目的根目

    2024年02月10日
    浏览(37)
  • 使用 Flask 部署 Next.js

    原文 使用 Flask 部署 Next.js Flask 和 Next.js 是两个独特的开源 Web 框架,分别构建在 Python 和 JavaScript 编程语言之上。 您可以在没有 Next.js 的情况下构建 Flask 应用程序,也可以在没有 Flask 的情况下构建 Next.js 应用程序。但是,您可能会发现自己使用 Flask 构建了一个应用程序,

    2024年02月12日
    浏览(48)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包