javascript - 使用可选属性扩展 TypeScript 类型

Question

我正在使用 NextJS，需要扩展他们的 AppProps输入我自己添加的可选参数Layout .然而 AppProps类型由许多其他类型组成，例如
应用 Prop :

export declare type AppProps<P = {}> = AppPropsType<Router, P>;

应用 Prop 类型:

export declare type AppPropsType<R extends NextRouter = NextRouter, P = {}> = AppInitialProps & {
    Component: NextComponentType<NextPageContext, any, P>;
    router: R;
    __N_SSG?: boolean;
    __N_SSP?: boolean;
};

下一个组件类型:

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>;
};

来自我的 _app.tsx我希望能够添加 Layout至 Component有类似的东西:

  Component: {
    Layout?: React.FunctionComponent;
  };

AppProps 有没有办法做到这一点？或者我需要扩展/相交 AppPropsType首先是 Layout然后重新声明我自己的 AppProps它使用扩展 AppPropsType ?

Answer 1

起初，我有这个丑陋的烂摊子来阻止错误:

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 */
}

我真的不喜欢这个，所以我最终得到了更接近你描述的东西:

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 */
}