[英]Extending a TypeScript Type with an optional property
I am working with NextJS and need to extend their AppProps
type with an optional parameter that I have added myself Layout
.我正在使用 NextJS 并且需要使用我自己添加的可选参数来扩展他们的
AppProps
类型Layout
。 However the AppProps
type is made up of many others eg但是
AppProps
类型由许多其他类型组成,例如
AppProps:应用道具:
export declare type AppProps<P = {}> = AppPropsType<Router, P>;
AppPropsType:应用道具类型:
export declare type AppPropsType<R extends NextRouter = NextRouter, P = {}> = AppInitialProps & {
Component: NextComponentType<NextPageContext, any, P>;
router: R;
__N_SSG?: boolean;
__N_SSP?: boolean;
};
NextComponentType:下一个组件类型:
export declare type NextComponentType<C extends BaseContext = NextPageContext, IP = {}, P = {}> = ComponentType<P> & {
/**
* Used for initial page load data population. Data returned from `getInitialProps` is serialized when server rendered.
* Make sure to return plain `Object` without using `Date`, `Map`, `Set`.
* @param ctx Context of `page`
*/
getInitialProps?(context: C): IP | Promise<IP>;
};
From my _app.tsx
I want to be able to add Layout
to Component
with something like:从我的
_app.tsx
我希望能够将Layout
添加到Component
,例如:
Component: {
Layout?: React.FunctionComponent;
};
Is there a way to do this from AppProps
or would I need to extend/intersect AppPropsType
first with Layout
then redeclare my own AppProps
which uses the extended AppPropsType
?有没有办法从
AppProps
做到这一点,或者我需要先用Layout
扩展/相交AppPropsType
然后重新声明我自己的使用扩展AppProps
的AppPropsType
?
At first, I had this ugly mess to stop errors:起初,我有这个丑陋的烂摊子来阻止错误:
import { AppProps } from 'next/app'
export default function App({ Component, pageProps }: AppProps) {
const RedeclaredAndHacky_Component = Component as any
const Layout = RedeclaredAndHacky_Component.layoutProps?.Layout || Fr
/* Rest of the function */
}
I didn't really like this, so I ended up with something closer to what you described:我真的不喜欢这个,所以我最终得到了更接近你描述的东西:
import { NextComponentType, NextPageContext } from 'next'
type AppProps = {
pageProps: any
Component: NextComponentType<NextPageContext, any, {}> & { layoutProps: any }
}
export default function App({ Component, pageProps }: AppProps) {
const Layout = Component.layoutProps?.Layout || Shell
/* Rest of the function */
}
I create a custom AppProps Next type so that way I can edit the Component
type.我创建了一个自定义 AppProps Next 类型,这样我就可以编辑
Component
类型。
interface CustomAppProps extends Omit<AppProps, "Component"> {
Component: AppProps["Component"] & { Layout: JSX.Element };
}
The final result will look something like this:最终结果将如下所示:
import type { AppProps } from "next/app";
interface CustomAppProps extends Omit<AppProps, "Component"> {
Component: AppProps["Component"] & { Layout: JSX.Element };
}
function CustomApp({ Component, pageProps }: CustomAppProps) {
return <Component {...pageProps} />;
}
export default CustomApp;
I've modified a little bit the answer of Pablo Verduzco.我已经修改了一点 Pablo Verduzco 的答案。 I think is more readable and extensible.
我认为更具可读性和可扩展性。
import type { AppProps } from "next/app"
interface CustomAppProps {
Component: AppProps["Component"] & {
auth: {
role: string
}
}
pageProps: AppProps["pageProps"]
}
function MyApp({ Component, pageProps }: CustomAppProps) {
return <Component {...pageProps} />;
}
export default MyApp;
In the material-ui examples there is some code which may help readers of this question as well: https://github.com/mui/material-ui/blob/3c528113f47cfddf2504ea02ba3065e7c5c46928/examples/nextjs-with-typescript/pages/_app.tsx#L13-L15在 material-ui 示例中,有一些代码也可以帮助这个问题的读者: https://github.com/mui/material-ui/blob/3c528113f47cfddf2504ea02ba3065e7c5c46928/examples/nextjs-with-typescript/pages/_app。 tsx#L13-L15
import * as React from 'react';
import Head from 'next/head';
import { AppProps } from 'next/app';
import { ThemeProvider } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';
import { CacheProvider, EmotionCache } from '@emotion/react';
import theme from '../src/theme';
import createEmotionCache from '../src/createEmotionCache';
// Client-side cache, shared for the whole session of the user in the browser.
const clientSideEmotionCache = createEmotionCache();
interface MyAppProps extends AppProps {
emotionCache?: EmotionCache;
}
export default function MyApp(props: MyAppProps) {
const { Component, emotionCache = clientSideEmotionCache, pageProps } = props;
return (
<CacheProvider value={emotionCache}>
<Head>
<meta name="viewport" content="initial-scale=1, width=device-width" />
</Head>
<ThemeProvider theme={theme}>
{/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
<CssBaseline />
<Component {...pageProps} />
</ThemeProvider>
</CacheProvider>
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.