如何为Next.js的getStaticPaths函数声明正确添加类型

对于Next.js的getStaticPaths，如果想用函数声明形式编写并添加类型标注，有两种常用的可行方法：

方法一：标注返回类型 #

直接通过ReturnType<GetStaticPaths>标注函数的返回类型，TypeScript会自动检查返回值是否符合getStaticPaths要求的结构：

import { GetStaticPaths } from 'next';

export async function getStaticPaths(): ReturnType<GetStaticPaths> {
  return {
    paths: [{ params: { id: 'example' } }],
    fallback: false,
  };
}

方法二：使用satisfies关键字（TypeScript 4.9+） #

利用TypeScript的satisfies关键字，让函数满足GetStaticPaths类型约束，写法更简洁，同时保留函数自身的类型信息：

import { GetStaticPaths } from 'next';

export async function getStaticPaths() {
  return {
    paths: [{ params: { id: 'example' } }],
    fallback: false,
  };
} satisfies GetStaticPaths;

两种方法都能确保函数声明符合Next.js对getStaticPaths的类型要求，编辑器会提供对应的类型提示和错误检查。

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