“ServerResponse”类型上不存在属性“status”（TS2339）

Question

我尝试过创建一个界面，安装反应类型，唯一有效的方法是当我将代码放入 JavaScript 中但在 TS 项目中时，它给了我错误：

“ServerResponse”类型上不存在属性“status”（TS2339）

这是代码：

import multer from 'multer';
import nc from "next-connect";


const upload = multer({
  storage: multer.diskStorage({
    destination: './public/uploads',
    filename: (req, file, cb) => cb(null, file.originalname),
  }),
});

const apiRoute = nc({
  onError(error, req, res) {
    res.status(501).json({ error: `Sorry something Happened! ${error.message}` });
  },
  onNoMatch(req, res) {
    res.status(405).json({ error: `Method '${req.method}' Not Allowed` });
  },
});

apiRoute.use(upload.array('theFiles'));

apiRoute.post((req, res) => {
  res.status(200).json({ data: 'success' });
});

export default apiRoute;

export const config = {
  api: {
    bodyParser: false, // Disallow body parsing, consume as stream
  },
};

如何修复打字？

Answer 1

req默认情况下，和 的基接口res是IncomingMessage和ServerResponse。在 API 路由中使用时，您应该将它们设置为NextApiRequest并NextApiResponse通过向工厂函数提供泛型来设置，如下所示：

import { NextApiRequest, NextApiResponse } from "next";
import nc from "next-connect";

const apiRoute = nc<NextApiRequest, NextApiResponse>({
  onError(error, req, res) {
    res.status(501).json({ error: `Sorry something Happened! ${error.message}` })
  },
  onNoMatch(req, res) {
    res.status(405).json({ error: `Method '${req.method}' Not Allowed` })
  },
})

apiRoute.post((req, res) => {
  res.status(200).json({ data: 'success' })
})

它将为您提供正确的类型，以便您可以使用对象status的方法res而不会出现任何 TypeScript 错误。

请参阅文档。