如何在TypeScript中覆写GetStaticProps的函数参数类型？

问题背景 #

我正在开发一个Next.js应用，使用GetStaticProps类型定义getStaticProps方法：

export type GetStaticProps<
  P extends { [key: string]: any } = { [key: string]: any },
  Q extends ParsedUrlQuery = ParsedUrlQuery,
  D extends PreviewData = PreviewData
> = (
  context: GetStaticPropsContext<Q, D>
) => Promise<GetStaticPropsResult<P>> | GetStaticPropsResult<P>

默认的GetStaticPropsContext定义中，locale、locales和defaultLocale是可选的：

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

但我的应用中这三个字段永远不会是undefined，希望在不完整复制GetStaticProps类型的前提下，覆写其上下文参数的类型，避免复制代码带来的可维护性问题。

解决方案 #

可以通过TypeScript的类型工具（Omit、交叉类型、ReturnType）复用原类型定义，仅修改需要的部分：

1. 定义带必填Locale字段的上下文类型 #

首先基于原GetStaticPropsContext，移除可选的Locale相关字段，再交叉上必填版本：

import { GetStaticPropsContext, ParsedUrlQuery, PreviewData } from 'next';

type RequiredLocaleGetStaticPropsContext<
  Q extends ParsedUrlQuery = ParsedUrlQuery,
  D extends PreviewData = PreviewData
> = Omit<GetStaticPropsContext<Q, D>, 'locale' | 'locales' | 'defaultLocale'> & {
  locale: string;
  locales: string[];
  defaultLocale: string;
};

2. 复用原GetStaticProps的返回类型构造新函数类型 #

利用ReturnType提取原GetStaticProps的返回类型，避免复制整个函数定义：

import { GetStaticProps, GetStaticPropsResult, ParsedUrlQuery, PreviewData } from 'next';

type RequiredLocaleGetStaticProps<
  P extends { [key: string]: any } = { [key: string]: any },
  Q extends ParsedUrlQuery = ParsedUrlQuery,
  D extends PreviewData = PreviewData
> = (
  context: RequiredLocaleGetStaticPropsContext<Q, D>
) => ReturnType<GetStaticProps<P, Q, D>>;

3. 使用自定义类型 #

现在可以用RequiredLocaleGetStaticProps代替原GetStaticProps，此时上下文的Locale字段会被TS识别为必填：

export const getStaticProps: RequiredLocaleGetStaticProps = async (context) => {
  // 此处context.locale、locales、defaultLocale均为必填，无undefined风险
  const { locale, locales, defaultLocale } = context;
  
  // 业务逻辑示例
  const translations = await fetchTranslations(locale);
  
  return {
    props: {
      translations,
      locale,
      locales,
      defaultLocale
    }
  };
};

方案优势 #

• 完全复用Next.js官方的GetStaticProps和GetStaticPropsContext类型定义，无需复制代码
• 后续Next.js更新类型定义（如返回类型、其他上下文字段）时，自定义类型会自动同步，不会出现维护滞后问题
• 仅修改需要的Locale字段约束，逻辑清晰且符合TypeScript最佳实践

内容的提问来源于stack exchange，提问作者Nicolas Bouvrette