时间戳

首页 > 解决方案 > 使用可选属性扩展 TypeScript 类型

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

问题描述

我正在使用 NextJS，需要AppProps使用我自己添加的可选参数来扩展它们的类型Layout。然而，该AppProps类型由许多其他类型组成，例如

应用道具：

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

应用道具类型：

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？

标签： javascripttypescripttypesextend

解决方案

我创建了一个自定义 AppProps Next 类型，这样我就可以编辑该Component类型。

interface CustomAppProps extends Omit<AppProps, "Component"> {
  Component: AppProps["Component"] & { Layout: JSX.Element };
}

最终结果将如下所示：

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;

推荐阅读