问如何在Next.js接口路由的请求body中添加TypeScript类型？

EN

问题

我喜欢使用TypeScript的一个主要原因是检查我是否将正确键入的参数传递给了给定的函数调用。

然而，在使用Next.js时，我遇到了这样一个问题:当参数被“降级”为NextApiRequest类型时，传递给Next.js端点的参数最终会丢失它们的类型。

通常，我会执行像req.body.[param_name]这样的参数，但整个链都有any类型，所以我会丢失任何有意义的类型信息。

示例

假设我在pages/api/add.ts的一个Next.js项目中有一个API端点，它负责将两个数字相加。在这个文件中，我们还有一个类型化函数，用于将两个数字相加，API端点将调用该函数。

const add = (a: number, b: number): number => a + b;

export default async (req: NextApiRequest, res: NextApiResponse) => {
  try {
    const result = add(req.body.number_one, req.body.number_two);
    res.status(200).json(result);
  } catch (err) {
    res.status(403).json({ err: "Error!" });
  }
};

我遇到的问题是如何输入req.body.number_one和req.body.number_two或来自request对象的任何类型的参数，我希望得到帮助。这个是可能的吗？

因为请求对象的类型是any，所以TypeScript不会报错，即使您尝试使用错误键入的参数调用API端点。

fetch("/api/add", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({ number_one: 1, number_two: "two" }),
});

通过上面对TypeScript端点的调用，即使类型不正确，API编译器也不会有任何问题。它将body视为any类型，因此会丢失所有类型信息。

如果我可以在Next.js中输入发送到API端点的请求体中的params cast，那就太好了。