如何在Next.js API路由中为请求正文添加类型？ [英] How to add TypeScript types to request body in Next.js API route?

问题描述

问题

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

但是，在使用Next.js时，我遇到了这样一个问题，传递给Next.js API终结点的参数在将"；降级为NextApiRequest类型时最终会丢失其类型。

通常，我会执行类似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!" });
  }
};

我遇到的问题是如何键入<[2-4]和req.body.number_two或来自请求对象的任何类型的参数，我希望得到帮助。这可能吗？

由于请求对象的类型为any，因此即使您尝试使用错误键入的参数调用API终结点，TypeScrip也不会出现错误。

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

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

如果我可以在Next.js中输入从发送到API终结点的请求体中转换的参数，那就太好了

推荐答案

您可以创建扩展NextApiRequest并添加这两个字段的类型的新接口。

interface ExtendedNextApiRequest extends NextApiRequest {
  body: {
    number_one: number;
    number_two: number;
  };
}

然后使用它在处理程序函数中键入req对象。

export default async (req: ExtendedNextApiRequest, res: NextApiResponse) => {
    //...
};

---

虽然扩展NextApiRequest类型将阻止TypeScrip出错，但它无法防止发生潜在的运行时错误。

有关缩小类型范围的更好的、类型安全的方法，请查看@Matthieu Gellé's answer。

这篇关于如何在Next.js API路由中为请求正文添加类型？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！