如何在 TypeScript 中用泛型覆盖类型的属性

很可能发生的情况是，GetStaticProps类型实际上是导致错误消息的原因:

它应该看起来像是:

type GetStaticProps = (context: GetStaticPropsContext) => void;

...然后是一个函数的getStaticProps变量赋值，该函数具有一些TS不喜欢的必需参数属性:您可以赋值一个更"允许"的函数(例如，一个接受可选参数的函数，一个更严格的函数，即接受必需参数的函数)，但不能相反.

type GetStaticPropsContext<Q extends ParsedUrlQuery = ParsedUrlQuery, D extends PreviewData = PreviewData> = {
  params?: Q | undefined;
  preview?: boolean | undefined;
  previewData?: D | undefined;
  locale?: string | undefined;
  locales?: string[] | undefined;
  defaultLocale?: string | undefined;
}

type LocaleConfig = {
  locale: string
  defaultLocale: string
  locales: string[]
}

export const getStaticProps = (
  context: GetStaticPropsContext & LocaleConfig
) => { } // Okay

type GetStaticProps = (context: GetStaticPropsContext) => void

const getStaticProps2: GetStaticProps = getStaticProps;
// Type '(context: GetStaticPropsContext & LocaleConfig) => void' is not assignable to type 'GetStaticProps'.
// Type 'string | undefined' is not assignable to type 'string'.
// Type 'undefined' is not assignable to type 'string'.

Playground Link个

通过说getStaticProps2函数是GetStaticProps类型，这意味着我们可以用空参数调用它(GetStaticPropsContext中的所有属性都是可选的):

getStaticProps2({});

但如果分配getStaticProps，一些属性将成为必需的……

至于转换类型以使它的一些可选属性成为必需的，确实，使用交叉点(&)是合适的技术.

您甚至可以使用Required和Pick实用程序类型的组合来捕获拼写错误并确保类型完全相同:

type LocaleConfig = Required<Pick<GetStaticPropsContext, "locale" | "defaultLocale" | "locales">>
//   ^? { locale: string; defaultLocale: string; locales: string []; }

export const getStaticProps = (
  context: GetStaticPropsContext & LocaleConfig
) => {
  // do stuff
  const locale = context.locale
  //    ^? string
  const preview = context.preview
  //    ^? boolean | undefined
}

getStaticProps({
  locale: "locale",
  defaultLocale: "",
  //locales: [] // Error if any of the Required properties is missing
});
// Property 'locales' is missing in type '{ locale: string; defaultLocale: string; }' but required in type 'Required<Pick<GetStaticPropsContext<ParsedUrlQuery, PreviewData>, "locale" | "defaultLocale" | "locales">>'.

Playground Link个