如何扩展 NextPage 类型以将自定义字段添加到页面组件？

Question

我正在尝试使用 TypeScript 跟踪下一个身份验证 documentation。使用以下代码和文档中_app.tsx 中的一些代码，我可以保护页面：

AdminDashboard.auth = {
  role: "admin",
  loading: <AdminLoadingSkeleton />,
  unauthorized: "/login-with-different-user", // redirect to this url
}

使用 TypeScript 实现这一点的正确方法是什么？

我找到了一个可行的解决方案，但我不确定这是否是正确的方法：

export type NextPageWithAuth = NextPage & {
  auth: boolean,
  role: string
}

type NextPageAuthProps = {
  Component: NextPageWithAuth,
  pageProps: any
}

AppProps 类型比我自己的 NextPageAuthProps 复杂得多。

Answer 1

在页面中，您可以扩展内置的NextPage 类型以包含具有适当类型的auth 字段。

import type { NextPage } from 'next';

type PageAuth = {
  role: string
  loading: JSX.Element
  unauthorized: string
};

export type NextPageWithAuth<P = {}, IP = P> = NextPage<P, IP> & {
  auth: PageAuth
};

const AdminDashboard: NextPageWithAuth = () => {
  // Your `AdminDashboard` code here
};

AdminDashboard.auth = {
  role: "admin",
  loading: <AdminLoadingSkeleton />,
  unauthorized: "/login-with-different-user"
};

export default AdminDashboard;

然后，在自定义 _app 中，您可以扩展 AppProps 以便 Component 属性扩展您在页面中声明的类型。

import type { NextComponentType, NextPageContext } from 'next';
import type { NextPageWithAuth } from '<path-to>/AdminDashboard';

type NextComponentWithAuth = NextComponentType<NextPageContext, any, {}> & Partial<NextPageWithAuth>

type ExtendedAppProps<P = {}> = AppProps<P> & {
  Component: NextComponentWithAuth
};

function MyApp({ Component, pageProps }: ExtendedAppProps) {
   //...
}